javascript - 添加连接第二个可排序列表的条件

Question

问题:我不确定如何添加

的条件

"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>

Answer 1

一种方法是扩展您的 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>