JQuery UI Draggable, Сортируемый - Disallow перетащив элемент

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 внутри контейнера nav. Вы можете добавить другое имя класса для целевых определенных строк, например:

<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" 
     }) 
    } 
});