javascript - Restrict container/parent for Sortable -

javascript - Restrict container/parent for Sortable -

ok, here again, playing @rubaxa's sortable plugin (and somewhere around here, 1 rather complicated...)

a few discoveries (it took me time understand mechanism, think i'm quite right)

case 1

if set 1 div same-type contents, it's instantly sortable. e.g.:

html

<div id="mycontainer"> <h3>item 1</h3> <h3>item 2</h3> </div>

javascript

new sortable(document.getelementbyid("mycontainer"));

demo: http://jsfiddle.net/b02wfe4o/

case 2

if set 1 div different-type contents (e.g. h2s , h3s, have specify draggable class. e.g.:

html

<div id="mycontainer"> <h3 class="mydraggable">item 1</h3> <h4 class="mydraggable">item 2</h4> </div>

javascript

new sortable(document.getelementbyid("mycontainer"), { draggable: '.mydraggable' });

demo: http://jsfiddle.net/qemz00eq/1/

case 3

if set 2 (or more) divs, side-by-side, works pretty much same way. e.g.:

html

<div id="mycontainer1"> <h3 class="mydraggable">item 1.1</h3> <h4 class="mydraggable">item 1.2</h4> </div> <div id="mycontainer2"> <h3 class="mydraggable">item 2.1</h3> <h4 class="mydraggable">item 2.2</h4> </div>

javascript

new sortable(document.getelementbyid("mycontainer1"), { draggable: '.mydraggable' }); new sortable(document.getelementbyid("mycontainer2"), { draggable: '.mydraggable' });

demo: http://jsfiddle.net/qeyxxj4y/

the issue

now, if sortable kid of sortable b?

html

<div id="mycontainer1"> <h3 class="mydraggable">item 1.1</h3> <h4 class="mydraggable">item 1.2</h4> <div id="mycontainer2"> <h3 class="mydraggable">item 2.1</h3> <h4 class="mydraggable">item 2.2</h4> </div> </div>

javascript

new sortable(document.getelementbyid("mycontainer1"), { draggable: '.mydraggable' }); new sortable(document.getelementbyid("mycontainer2"), { draggable: '.mydraggable' });

demo: http://jsfiddle.net/j7feslkp/8/

well, not work expected:

mycontainer2 items can moved/sorted within container. fine. mycontainer1 items though can moved in mycontainer2 well, mean take element 1.1 , set within mycontainer2 works - wasn't happening when 2 containers side-by-side.

so, how can disable behaviour? mean: each container's items must move within container , not within children.

how can done?

you gave separate sortables, , split them in 2 different groups. alter class of 1 of groups in html , js initialize them group.

javascript jquery html css rubaxa-sortable