jQuery UI Draggable, Sortable - 禁止拖动元素

Question

这是我正在使用的脚本：

    $(".nav .row").draggable({
    connectToSortable: ".demo",
    helper: "clone",
    handle: ".drag",
    drag: function (e, t) {
        t.helper.width(400)
    },
    stop: function (e, t) {
        $(".demo .column").sortable({
            opacity: .35,
            connectWith: ".column"
        })
    }
});

基本上它的作用是允许拖动新行并允许在这些行内的列内拖动元素。

这是一个示例输出：

<div class='demo'>
     <div class='row'>
          <div class='column'>
          </div>
     </div>
</div>

它的问题是它允许在该列类中拖动另一行，我想防止这种情况发生，这就是发生的情况：

<div class='demo'>
     <div class='row'>
          <div class='column'>
               <div class='row'>
                    <div class='column'>
                    </div>
               </div>
          </div>
     </div>
</div>

谁能给我一些建议，我可以如何防止这种情况发生？

Answer 1

这是因为$(".nav .row") 在导航容器中选择了所有具有.row 类的元素。您可以添加另一个类名来定位特定行，例如：

<div class='demo'>
     <div class='row dragabble'>
          <div class='column'>
          </div>
     </div>
</div>

$(".nav .draggable").draggable({
    connectToSortable: ".demo",
    helper: "clone",
    handle: ".drag",
    drag: function (e, t) {
        t.helper.width(400)
    },
    stop: function (e, t) {
        $(".demo .column").sortable({
            opacity: .35,
            connectWith: ".column"
        })
    }
});