gpt4 book ai didi

jQuery UI 拖/放,捕捉到底部

转载 作者:行者123 更新时间:2023-12-01 04:52:14 28 4
gpt4 key购买 nike

所以,基于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 位于相对定位 div 内的绝对底部 0,它应该被捕捉到底部......但事实并非如此。我在这里忽略了什么?

最佳答案

我只是在玩类似的东西 another question我认为同样的方法可能适合您。

基本上我找到了添加新的snapModes的方法到 jQuery-UI。

您将需要编辑 jQuery-ui 文件,但我认为这可能是值得的。

除了标准的内部、外部以及两者。我添加了以下选项:

  • 内部顶部
  • 内底
  • 内左
  • 内右
  • 外部顶部
  • 外底
  • 外部右
  • 外部左

<强> Working Example

方法如下:

搜索:

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

并将其替换为:

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

关于jQuery UI 拖/放,捕捉到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18294487/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com