【发布时间】：2018-02-16 09:29:24
【问题描述】：
我在左侧有一个项目列表，可以将其拖入右侧的任何框中。这些项目可以在多个盒子中，但每个盒子只能出现一次。我正在尝试获取可拖动项目的 ID，并将其与框中已存在的所有项目的 ID 进行比较，但似乎无法正确处理。我的代码如下：
$(".sortable").sortable({
revert: true,
connectWith: ".draggable"
});
$(".draggable").draggable({
connectToSortable: ".sortable",
helper: "clone",
revert: "true",
placeholder: ".droppable-placeholder",
stop: function(event, ui) {
//console.dir(ui.helper[0]);
var listContainer = ui.helper[0].closest('ul');
if (listContainer) {
console.dir(listContainer);
listContainer.find('li').each(function() { //This is not right
var sortableItemId = $(this).attr("id");
console.dir($(this));
console.log("sortable item id " + sortableItemId);
});
}
}
});
$("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>我基本上是想阻止在同一个盒子中出现重复。
【问题讨论】：
-
那么您目前如何比较已删除的项目与列表中的项目？
-
@Twisty，对不起，我在 tiswas 并删除了很多不起作用的代码
标签： jquery-ui duplicates draggable