jQuery UI拖放，捕捉到底部

Question

因此，基於this answer，我有一組div可以拖放和捕捉到位。唯一的問題是，可拖動的div有不同的高度，我需要它們總是捕捉到目標的底部，而不是頂部。

您可以在this JsFiddle中看到標記的演示和我遇到的問題。

標記是這樣的：

<!-- Slots are droppable targets --> 
<div class="devices"> 
    <div class="slot" id="slot_10"> 
    <span class="text">Slot 10</span> 
    </div> 
    <div class="slot" id="slot_9"> 
    <span class="text">Slot 9</span> 
    </div> 
    ... 
</div> 
<!-- .device is draggable --> 
<div class="products"> 
    <div class="device" data-height="2" id="device_1"> 
    Device 1 
    </div> 
    <div class="device" data-height="1" id="device_2"> 
    Device 2 
    </div> 
    ... 
</div> 

這裏是JS部分：

$(function(){ 
    $('.device').draggable({}); 
    $('.slot, .products').droppable({ 
    hoverClass: 'active', 
    drop: function(event, ui) { 
     console.log("Dropped:",ui.draggable.attr('id'),"on:",$(this).attr('id')); 
     $(ui.draggable).detach().css({top:'',left:0,bottom:0}).appendTo(this); 
    } 
    }); 
}); 

這裏是CSS

.sample-ui { margin: 40px auto 0; width: 700px; } 
.cabinet { width: 335px; float: left; margin-right: 65px; } 
.rack { width: 30px; margin-right: 5px; float: left; } 
.devices { float: left; width: 300px; } 
.bolt, .device, .slot { 
    position: relative; 
    height: 30px; line-height: 30px; text-align: center; background: #FFF; 
    margin-bottom: 5px; 
} 
.slot { background: #EEE; } 
.slot .text { display: block; position: absolute; width: 100%; top: 0; left: 0; } 
.active { border: 1px solid #F00; } 
.device { z-index: 100; } 
.device[data-height="2"] { height: 65px; } 
.device[data-height="3"] { height: 100px; } 

.catalogue { 
    width: 300px; float: left; 
} 

在我看來，就像如果DIV是定位絕對底部0在一個相對定位的div內，它應該被捕捉到底部......但這不是什麼hap pening。我在這裏忽略了什麼？

Answer 1

我只是在玩another question類似的東西，我認爲同樣的方法可能適用於你。

基本上我想出了一種將新的snapModes添加到jQuery-UI的方法。

您將需要編輯jQuery-ui文件，但我認爲這可能是值得的。

除了標準的內部，外部和兩者。我添加了以下選項：

• innerTop
• innerBottom
• innerLeft
• InnerRight
• outerTop
• outerBottom
• outerRight
• outerLeft

Working Example

方法如下：

搜索：

if (o.snapMode != 'inner' && o.snapMode != 'innerTop' && o.snapMode != 'innerBottom' && o.snapMode != 'innerLeft' && o.snapMode != 'innerRight' && o.snapMode != 'outerTop' && o.snapMode != 'outerBottom' && o.snapMode != 'outerLeft' && o.snapMode != 'outerRight') { 
    var ts = Math.abs(t - y2) <= d; 
    var bs = Math.abs(b - y1) <= d; 
    var ls = Math.abs(l - x2) <= d; 
    var rs = Math.abs(r - x1) <= d; 
    if (ts) ui.position.top = inst._convertPositionTo("relative", { 
     top: t - inst.helperProportions.height, 
     left: 0 
    }).top - inst.margins.top; 
    if (bs) ui.position.top = inst._convertPositionTo("relative", { 
     top: b, 
     left: 0 
    }).top - inst.margins.top; 
    if (ls) ui.position.left = inst._convertPositionTo("relative", { 
     top: 0, 
     left: l - inst.helperProportions.width 
    }).left - inst.margins.left; 
    if (rs) ui.position.left = inst._convertPositionTo("relative", { 
     top: 0, 
     left: r 
    }).left - inst.margins.left; 
} 

var first = (ts || bs || ls || rs); 

if (o.snapMode != 'outer' && o.snapMode != 'innerTop' && o.snapMode != 'innerBottom' && o.snapMode != 'innerLeft' && o.snapMode != 'innerRight' && o.snapMode != 'outerTop' && o.snapMode != 'outerBottom' && o.snapMode != 'outerLeft' && o.snapMode != 'outerRight') { 
    var ts = Math.abs(t - y1) <= d; 
    var bs = Math.abs(b - y2) <= d; 
    var ls = Math.abs(l - x1) <= d; 
    var rs = Math.abs(r - x2) <= d; 
    if (ts) ui.position.top = inst._convertPositionTo("relative", { 
     top: t, 
     left: 0 
    }).top - inst.margins.top; 
    if (bs) ui.position.top = inst._convertPositionTo("relative", { 
     top: b - inst.helperProportions.height, 
     left: 0 
    }).top - inst.margins.top; 
    if (ls) ui.position.left = inst._convertPositionTo("relative", { 
     top: 0, 
     left: l 
    }).left - inst.margins.left; 
    if (rs) ui.position.left = inst._convertPositionTo("relative", { 
     top: 0, 
     left: r - inst.helperProportions.width 
    }).left - inst.margins.left; 
} 

if (o.snapMode == 'innerTop') { 
    var ts = Math.abs(t - y1) <= d; 
    if (ts) ui.position.top = inst._convertPositionTo("relative", { 
     top: t, 
     left: 0 
    }).top - inst.margins.top; 
} 

if (o.snapMode == 'innerBottom') { 
    var bs = Math.abs(b - y2) <= d; 
    if (bs) ui.position.top = inst._convertPositionTo("relative", { 
     top: b - inst.helperProportions.height, 
     left: 0 
    }).top - inst.margins.top; 
} 

if (o.snapMode == 'innerLeft') { 
    var ls = Math.abs(l - x1) <= d; 
    if (ls) ui.position.left = inst._convertPositionTo("relative", { 
     top: 0, 
     left: l 
    }).left - inst.margins.left; 
} 

if (o.snapMode == 'innerRight') { 
    var rs = Math.abs(r - x2) <= d; 
    if (rs) ui.position.left = inst._convertPositionTo("relative", { 
     top: 0, 
     left: r - inst.helperProportions.width 
    }).left - inst.margins.left; 
} 


if (o.snapMode == 'outerTop') { 
    var ts = Math.abs(t - y2) <= d; 
    if (ts) ui.position.top = inst._convertPositionTo("relative", { 
     top: t - inst.helperProportions.height, 
     left: 0 
    }).top - inst.margins.top; 
} 

if (o.snapMode == 'outerBottom') { 
    var bs = Math.abs(b - y1) <= d; 
    if (bs) ui.position.top = inst._convertPositionTo("relative", { 
     top: b, 
     left: 0 
    }).top - inst.margins.top; 
} 

if (o.snapMode == 'outerLeft') { 
    var ls = Math.abs(l - x2) <= d; 
    if (ls) ui.position.left = inst._convertPositionTo("relative", { 
     top: 0, 
     left: l - inst.helperProportions.width 
    }).left - inst.margins.left; 
} 

if (o.snapMode == 'outerRight') { 
    var rs = Math.abs(r - x1) <= d; 
    if (rs) ui.position.left = inst._convertPositionTo("relative", { 
     top: 0, 
     left: r 
    }).left - inst.margins.left; 
} 

：

if(o.snapMode != 'inner') { 
       var ts = Math.abs(t - y2) <= d; 
       var bs = Math.abs(b - y1) <= d; 
       var ls = Math.abs(l - x2) <= d; 
       var rs = Math.abs(r - x1) <= d; 
       if(ts) ui.position.top = inst._convertPositionTo("relative", { top: t - inst.helperProportions.height, left: 0 }).top - inst.margins.top; 
       if(bs) ui.position.top = inst._convertPositionTo("relative", { top: b, left: 0 }).top - inst.margins.top; 
       if(ls) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l - inst.helperProportions.width }).left - inst.margins.left; 
       if(rs) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r }).left - inst.margins.left; 
      } 

      var first = (ts || bs || ls || rs); 

      if(o.snapMode != 'outer') { 
       var ts = Math.abs(t - y1) <= d; 
       var bs = Math.abs(b - y2) <= d; 
       var ls = Math.abs(l - x1) <= d; 
       var rs = Math.abs(r - x2) <= d; 
       if(ts) ui.position.top = inst._convertPositionTo("relative", { top: t, left: 0 }).top - inst.margins.top; 
       if(bs) ui.position.top = inst._convertPositionTo("relative", { top: b - inst.helperProportions.height, left: 0 }).top - inst.margins.top; 
       if(ls) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l }).left - inst.margins.left; 
       if(rs) ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r - inst.helperProportions.width }).left - inst.margins.left; 
      } 

，取而代之的是