I used bootstrap css and JqueryUI to create a list in draggable <ul> and made a <div> as droppable area. Now the drag and drop both work properly.
<ul id="showdata" class="list-group ui-helper-reset ui-droppable" style="overflow: auto; height: 200px; display: block;">
<li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>
</li>
<li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>
</li>
<li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>
</li>
<li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>
</li>
<li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>
</li>
<li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a>
</li>
</ul>
<div class="col-md-6" id="dropdiv">
<label for="Drag_Your_Selection_Here">Drag Your Selection Here</label>
<div id="droppable" class="col-md-pull-12 ui-droppable" style="border: 2px solid gray; overflow: auto; height: 200px; display: block;"></div>
</div>
I'd like to have a click function:
1.When clicking "+", the list can be added in droppable <div>.
2.When clicking "x", the list can be added back to where it was.
var $showdata = $("#showdata"),
$droppable = $("#droppable");
// make draggable<ul>→<li> draggable//
$("#showdata > li").draggable({
cancel: "a.glyphicon.glyphicon-plus", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
//make droppable<div> droppable
$droppable.droppable({
accept: "#showdata > li",
activeClass: "ui-state-highlight",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
addlist(ui.draggable);
}
}).sortable({
sort: function () {
$(this).removeClass("ui-state-highlight");
}
}).disableSelection();
// make DRAGGABLE<div> droppable, accepting items from droppable<div>
$showdata.droppable({
accept: "#droppable li",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
deletelist(ui.draggable);
}
});
// init delete<a>
var del_icon = "<a href='#del' id='del_id' class='glyphicon glyphicon-remove' title='delete group to selection' style='float: right'></a>";
`
// find <li> to get back to where it was found
function addlist($item) {
$item.fadeOut(function () {
var $list = $("ul", $droppable).length ? $("ul", $droppable) : $("<ul class='list-group ui-helper-reset'></ul>").appendTo($droppable);
$item.find("a.glyphicon.glyphicon-plus").remove();
$item.append(del_icon).appendTo($list).fadeIn();
});
};
//init add<a>
//var add_icon = "<a id='add_id' class='glyphicon glyphicon-plus' style='float: right'></a>";
var add_icon = $("a.glyphicon.glyphicon-plus");
//find <li> to delete
function deletelist($item) {
$item.fadeOut(function () {
$item.find("a.glyphicon.glyphicon-remove").remove().end().append(add_icon).appendTo($showdata).fadeIn();
});
};
// resolve the icons behavior with event delegation
$($showdata > "li").click(function (event) {
var $item = $(this),
$target = $(event.target);
if ($target.is("a.glyphicon.glyphicon-plus")) {
deletelist($item);
} else if ($target.is("a.glyphicon.glyphicon-remove")) {
addlist($item);
}
return false;
});`
drag and drop function
I also have the sortable function. But everytime I sort a list in droppable <div>, it adds one more <a> (which is the symbol "x") on that list.
Anyone can be able to solve these two problems? I'll sincerely appreciate that!
Here is my JsFiddle https://jsfiddle.net/woodmanhu/87cjr896/5/
