JQuery UI сортировкой connecwith детей типа

Question

Я не знаю, как решить эту проблему:

У меня есть 3 типа контейнеров:

1.- .global_container: дети могут быть:. zona_completa, .zona_izquierda, .zona_derecha

2.- global_container_2col: дети только могут быть: .zona_izquierda

3.- global_container_1col: дети только могут быть: .zona_derecha

я должен двигаться от «global_container_2col» и «global_container_1col» в «global_container»

Но я должен двигаться только от «global_container» до «container_container_2col», если элемент ".zona_izquierda"

и

я должен двигаться только от "global_container" до "container_container_1col", если элемент ".zona_derecha".

HTML:

<div class="global_container_2col" data-type="global_container"> 
    <div class="zona_izquierda zone" data-type="zone"> 
    </div> 
</div> 
<div class="global_container_1col" data-type="global_container"> 
    <div class="zona_derecha zone" data-type="zone"> 
    </div> 
</div> 
<div class="global_container" data-type="global_container"> 
    <div class="zona_izquierda zone" data-type="zone"> 
    </div> 
    <div class="zona_derecha zone" data-type="zone"> 
    </div> 
    <div class="zona_completa zone" data-type="zone"> 
    </div>  
</div> 

JS:

$('body').sortable(
{ 
    items: 'div[data-type="global_container"]' 
}); 

$('.global_container').sortable(
{ 
    connectWith: 'div[data-type="global_container"]', 
    items: 'div[data-type="zone"]' 
}); 

$('.global_container_2col').sortable(
{ 
    connectWith: '.global_container_2col, .global_container', 
    items: '.zona_izquierda' 
}); 

$('.global_container_1col').sortable(
{ 
    connectWith: '.global_container_1col, .global_container', 
    items: '.zona_derecha' 
}); 

DEMO: https://jsfiddle.net/kwrx4182/3/

Answer 1

Базирование в этом ответе: Prevent drop of list item in JqueryUI sortable

Нам нужно использовать событие «получить» в сортируется, проверьте класс элемента, который тащили и возвращается событие:

$('body').sortable(
{ 
    items: 'div[data-type="global_container"]' 
}); 

$('.global_container').sortable(
{ 
    connectWith: 'div[data-type="global_container"]', 
    items: 'div[data-type="zone"]' 
}); 

$('.global_container_2col').sortable(
{ 
    connectWith: '.global_container_2col, .global_container', 
    items: '.zona_izquierda', 
    receive: function(ev, ui) 
    { 
     if(!ui.item.hasClass('zona_izquierda')) 
     { 
     ui.sender.sortable('cancel'); 
     } 
    } 
}); 

$('.global_container_1col').sortable(
{ 
    connectWith: '.global_container_1col, .global_container', 
    items: '.zona_derecha', 
    receive: function(ev, ui) 
    { 
     if(!ui.item.hasClass('zona_derecha')) 
     { 
     ui.sender.sortable('cancel'); 
     } 
    } 
}); 

DEMO: https://jsfiddle.net/kwrx4182/7/

Answer 2

$('.global_container_2col').sortable(
{ 
    connectWith: '.global_container_2col, .global_container', 
    items: '.zona_izquierda', 
    items: 'div:not(.zona_derecha)' 
}); 

$('.global_container_1col').sortable(
{ 
    connectWith: '.global_container_1col, .global_container', 
    items: '.zona_derecha' 
    ,items: 'div:not(.zona_izquierda)' 
});