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

Question

this is the script I'm using:

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

Basically what it does is that it allows dragging new rows and allows dragging elements inside columns inside these rows.

Here is an example output:

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

The problem with it is that it allows dragging another row inside that column class, I want to prevent this from happening, this is what happens:

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

Can anyone give me some suggestions how I could prevent this from happening?

Answer 1

It's happening because $(".nav .row") selects all elements with a class of .row within nav container. You could add another class name to target specific rows, for example:

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