我已经制作了四个可排序的.sort
列,其中包含可以排序的.sortable
元素。在.sortable
内部,放置了.sort-sortable
元素。我可以将.sort-sortable
拖放到.sortable
内,并对.sortable
内的.sort
进行同样的操作。
问题在于,尽管我可以将.sort-sortable
拖放到.sort
内,但是它卡在了那里,无法将其移动到其他任何地方。我有两个问题:
.sort-sortable
移到.sort
吗?.sort-sortable
会卡住?我在做什么错了?
$(function() {
$(".sort").sortable({
connectWith: ".sort, sortable",
handle: ".head",
cursor: 'Move',
});
$(".sort").disableSelection();
$(".sortable").sortable({
connectWith: ".sortable, .sort",
cancel: ".head"
});
$(".sortable").disableSelection();
});
.sort {
display: block;
width: 23%;
float: left;
margin: 20px 1%;
padding: 10px;
box-sizing: border-box;
background: #bfe0ff;
min-height: 800px
}
.sortable {
min-height: 350px;
width: 100%;
box-sizing: border-box;
padding: 10px;
background: #bbb;
margin: 0 0 20px 0;
}
.sortable .head {
padding: 20px;
text-align: center;
background: #7F7F7F;
color: #fff;
font-weight: bold;
margin: 0 0 20px 0;
}
.sortable .sortable {
background: #ffbbbc;
}
.sort-sortable {
min-height: 100px;
width: 100%;
box-sizing: border-box;
padding: 10px;
background: #333;
margin: 0 0 20px 0;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sort">
<div class="sortable">
<div class="head">Drag Me Please!</div>
<div class="sort-sortable"></div>
<div class="sort-sortable"></div>
<div class="sort-sortable"></div>
</div>
</div>
<div class="sort">
<div class="sortable">
<div class="head">Drag Me Please!</div>
<div class="sort-sortable"></div>
<div class="sort-sortable"></div>
<div class="sort-sortable"></div>
</div>
</div>
<div class="sort"> </div>
<div class="sort">
<div class="sortable">
<div class="head">Drag Me Please!</div>
<div class="sort-sortable"></div>
<div class="sort-sortable"></div>
<div class="sort-sortable"></div>
</div>
</div>
答案 0 :(得分:0)
我认为这是由于handle: ".head",
造成的。删除它可以解决问题。