我有一个我想使用页面左侧的项目列表，可以将这些项目拖到另一侧的框中。我希望这些物品可拖动到框或被删除。我创建了一个JSFIDDLE，该JSFIDDLE允许将项目拖到框中，但这并不是我希望它能正常工作的方式。我的问题如下：
- 它会重新定位盒子，并在盒子生长时将它们放入左列。我希望左手只包含可拖动物品。
- 它闪烁，并不总是拖到光标的位置。我在Mac上使用Chrome。
- 我也希望能够从框中删除项目。
html：
$(".sortable").sortable({
revert: true
});
$(".draggable").draggable({
connectToSortable: ".sortable",
helper: "clone",
revert: "false",
placeholder: " droppable-placeholder"
});
$("ul, li").disableSelection();ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0.7em;
float: left;
}
li {
margin: 0.5em;
padding: 0.5em;
width: 150px;
border: 1px solid black;
}
.draggable-column {
height:100%;
}
.droppable-item {
border: 1px solid black;
padding: 5px;
float: left;
}
.sortable {
width: 200px;
min-height: 2em;
}
.droppable-placeholder {
background-color: lightgrey;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<div class="row">
<div class="col-xs-4 draggable-column">
<ul class="">
<li class="draggable ">1 Drag me onto item</li>
<li class="draggable ">2 Drag me onto item</li>
<li class="draggable ">3 Drag me onto item</li>
<li class="draggable ">4 Drag me onto item</li>
<li class="draggable ">5 Drag me onto item</li>
</ul>
</div>
<div class="col-xs-8 droppable-column">
<div class="col-xs-3 droppable-item">
<h3>
Item 1
</h3>
<ul class="sortable droppable-placeholder">
</ul>
</div>
<div class="col-xs-3 droppable-item">
<h3>
Item 2
</h3>
<ul class="sortable droppable-placeholder">
</ul>
</div>
<div class="col-xs-3 droppable-item">
<h3>
Item 3
</h3>
<ul class="sortable droppable-placeholder">
</ul>
</div>
<div class="col-xs-3 droppable-item">
<h3>
Item 4
</h3>
<ul class="sortable droppable-placeholder">
</ul>
</div>
<div class="col-xs-3 droppable-item">
<h3>
Item 5
</h3>
<ul class="sortable droppable-placeholder">
</ul>
</div>
<div class="col-xs-3 droppable-item">
<h3>
Item 6
</h3>
<ul class="sortable droppable-placeholder">
</ul>
</div>
</div>
</div>终于弄清楚了如何做到这一点，但它不是特别干净：
$(".sortable").sortable({
revert: true,
connectWith: ".draggable"
});
$(".draggable").draggable({
connectToSortable: ".sortable",
helper: "clone",
revert: "true",
placeholder: ".droppable-placeholder",
stop: function(event, ui) {
console.log("--start of stop");
var listContainer = $(ui.helper[0].parentElement);
var newListId = listContainer.attr("id");
var draggableId = $(this).attr("id");
var cloneId = newListId + "-" + draggableId;
console.log("new list id: " + newListId);
console.log("draggableId: " + draggableId);
console.log("cloneId: " + cloneId);
var itemExists = false;
$("#"+ newListId).find('li').each(function() {
var sortableItemId = $(this).attr("id");
console.log("sortable item id " + sortableItemId);
if (sortableItemId != undefined && sortableItemId == cloneId) {
console.log("*** sortable item already exists");
itemExists = true;
}
});
if (itemExists) {
$("#" + cloneId).remove();
}
$(ui.helper[0]).attr("id", cloneId);
console.log("--end of stop");
},
});
$("ul, li").disableSelection();
$(".draggable-column, .droppable-column").on("click", ".close-list-item", function(event) {
event.preventDefault();
$(this).closest('li').remove();
});ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0.7em;
float: left;
}
li {
margin: 0.5em;
padding: 0.5em;
width: 200px;
border: 1px solid black;
}
.draggable-column {
height: 100%;
}
.droppable-item {
padding: 0.5em;
float: left;
align-content: space-between;
}
.droppable-item > h3 {
text-align: center;
}
.sortable {
width: 230px;
height: 10em;
overflow: auto;
border: 1px solid black;
background-color: lightgrey;
}
.droppable-placeholder {
background-color: yellow;
}
.row {
display: flex;
/* equal height of the children*/
}
.col {
flex: 1;
/* additionally, equal width */
padding: 1em;
border: solid;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="row">
<div class="col-xs-4 draggable-column">
<ul class="" id="draggable-column-list">
<li class="draggable " id="item1">1 Drag me onto item
<a href="#" class="close-list-item">
<i class="fa fa-window-close"></i>
</a>
</li>
<li class="draggable " id="item2">2 Drag me onto item
<a href="#" class="close-list-item">
<i class="fa fa-window-close"></i>
</a>
</li>
<li class="draggable " id="item3">3 Drag me onto item
<a href="#" class="close-list-item">
<i class="fa fa-window-close"></i>
</a>
</li>
<li class="draggable " id="item4">4 Drag me onto item
<a href="#" class="close-list-item">
<i class="fa fa-window-close"></i>
</a>
</li>
<li class="draggable " id="item5">5 Drag me onto item
<a href="#" class="close-list-item">
<i class="fa fa-window-close"></i>
</a>
</li>
</ul>
</div>
<div class="col-xs-8 droppable-column">
<div class="droppable-item">
<h3>
Item 1
</h3>
<ul class="sortable" id="ul-item1">
</ul>
</div>
<div class="droppable-item">
<h3 class="">
Item 2
</h3>
<ul class="sortable" id="ul-item2">
</ul>
</div>
<div class="droppable-item">
<h3>
Item 3
</h3>
<ul class="sortable" id="ul-item3">
</ul>
</div>
<div class="droppable-item">
<h3>
Item 4
</h3>
<ul class="sortable" id="ul-item4">
</ul>
</div>
<div class="droppable-item">
<h3>
Item 5
</h3>
<ul class="sortable" id="ul-item5">
</ul>
</div>
<div class="droppable-item">
<h3>
Item 6
</h3>
<ul class="sortable" id="ul-item6">
</ul>
</div>
</div>
</div>