jqueryのUIソート可能なconnecwithは、私は、この問題を解決する方法がわからない

Question

入力します。

1.- が.global_container：：子供たちがすることができ

私は、容器の3種類があります。 zona_completa、.zona_izquierda、.zona_derecha

2.- global_container_2col：子供だけになります.zona_izquierda

3.- global_container_1col：子供のみになります.zona_derecha

私は "global_container"

に "global_container_2col" と "global_container_1col" から移動する必要があります。しかし項目がある場合、私はONLY "container_container_2col" に "global_container" から移動する必要があります項目は ".zona_derecha" であれば ".zona_izquierda"

と

私はONLY "container_container_1col" に "global_container" から移動する必要があります。

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