使用jquery UI从ul中的列表中拖出特定部分?

时间:2017-08-17 10:08:54

标签: javascript jquery html css jquery-ui

我有一个包含文字和箭头的列表。我想以这样的方式拖动或排序箭头:

  1. 可以将它们从1个列表拖到其他列表。
  2. 红色箭头不能出现在绿色箭头之前,即红色箭头总是在绿色上方,如果有人试图在它上方拖动,它应该是不可能的,它只位于红色以下。
  3.   

    这是我到目前为止所尝试的内容:

    
    
    $("ul.droptrue").sortable({
      connectWith: "ul"
    });
    
    .green {
      color: green
    }
    
    .red {
      color: red;
    }
    
    li,
    ul {
      list-style: none;
    }
    
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <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>
    <ul class="droptrue">
      <li>i am a text 1 <i class="fa fa-arrow-left red"></i> </li>
      <li>i am a text 2 <i class="fa fa-arrow-left green"></i> </li>
      <li>i am a text 3 </li>
      <li>i am a text 4 </li>
      <li>i am a text 5 </li>
      <li>i am a text 6 </li>
    </ul>
    &#13;
    &#13;
    &#13;

      

    问题:

    现在整个列表都在拖动,我只想拖动箭头。

    先谢谢

    快乐编码。

1 个答案:

答案 0 :(得分:1)

您可以使用update()事件并比较两个箭头的偏移量,如果条件不匹配,则使用cancel()方法取消排序。

&#13;
&#13;
$(document).ready(function() {
  $("ul.droptrue li").sortable({
    connectWith: "li",
    items: "> i",
    update: function(event, ui) {
      var redArrow = $('.fa.fa-arrow-left.red').offset().top;
      var greenArrow = $('.fa.fa-arrow-left.green').offset().top;
      if (redArrow >= greenArrow) {
        $("ul.droptrue li").sortable("cancel");
        console.log("Red arrow cannot be greater than Green arrow")
      }
    }
  });
})
&#13;
.green {
  color: green
}

.red {
  color: red;
}

li,
ul {
  list-style: none;
}

ul {
  width: 100px
}

li div {
  display: inline-block
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<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>
<ul class="droptrue">
  <li>
    <div>i am a text 1</div> <i class="fa fa-arrow-left red pull-right"></i> </li>
  <li>i am a text 2 <i class="fa fa-arrow-left green pull-right"></i> </li>
  <li>i am a text 3 </li>
  <li>i am a text 4 </li>
  <li>i am a text 5 </li>
  <li>i am a text 6 </li>
</ul>
&#13;
&#13;
&#13;

修改:items: "> i"中添加了sortable()item selector),这将指定父元素中的哪个元素应该是可排序的。