问题:我不确定如何添加
的条件"if("Are you sure"is answered with "ok") 仅适用于跨列表排序。
逻辑:如果项目从 list1 移到 list2,则警告(“你确定吗”),否则如果项目从 list1 移到 list1 或 list2 到 list2,则什么也不做(否则排序该项目到列表中的新位置)。
$(".sortable1").sortable({
update: function (event, ui) {
if (!confirm("Are you sure?")) {
event.preventDefault();
}
},
connectWith: ".sortable2"
});
$(".sortable2").sortable({connectWith: ".sortable1"});
.sortable1{
box-shadow: 1px 1px 1px 1px black;
float: left;
width: 35%;
list-style: none;
margin-right: 5%;
}
.sortable2{
box-shadow: 1px 1px 1px 1px black;
float: left;
width: 35%;
list-style: none;
}
li{
padding: 0;
margin: 0;
box-shadow: .25px .25px .25px .25px black;
text-align: center;
}
ul{
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="list sortable1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="list sortable2">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
最佳答案
一种方法是扩展您的 update()
处理程序以检查被拖动项目的源和放置区域,以确定是否应显示确认。一个快速的方法是:
/* Is item being dragged from sortable1 ? */
$(event.target).hasClass('sortable1')
和:
/* If item being droped in sortable2 ? */
$(ui.item).closest('.sortable2').length > 0
使用这两个构建 block ,您可以按如下方式实现所需的行为:
$(".sortable1").sortable({
update: function(event, ui) {
/* If drag event trigged from item in sortable1? */
if ($(event.target).hasClass('sortable1')) {
/* And item drop zone in sortable2? */
if ($(ui.item).closest('.sortable2').length > 0) {
/* Then ask user for confirmation */
if (!confirm("Are you sure?")) {
event.preventDefault();
}
}
}
},
connectWith: ".sortable2"
});
$(".sortable2").sortable({
connectWith: ".sortable1"
});
可以在下面的代码片段中看到一个工作示例:
$(".sortable1").sortable({
update: function(event, ui) {
/* If drag event trigged from item in sortable1? */
if ($(event.target).hasClass('sortable1')) {
/* And item drop zone in sortable2? */
if ($(ui.item).closest('.sortable2').length > 0) {
/* Then ask user for confirmation */
if (!confirm("Are you sure?")) {
event.preventDefault();
}
}
}
},
connectWith: ".sortable2"
});
$(".sortable2").sortable({
connectWith: ".sortable1"
});
.sortable2, .sortable1 {
box-shadow: 1px 1px 1px 1px black;
float: left;
width: 35%;
list-style: none;
}
.sortable1 {
margin-right: 5%;
}
li {
padding: 0;
margin: 0;
box-shadow: .25px .25px .25px .25px black;
text-align: center;
}
ul {
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="list sortable1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="list sortable2">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
关于javascript - 添加连接第二个可排序列表的条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57280837/