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")選擇了nav容器中所有帶有.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"
        })
    }
});