jquery-ui 可拖动：正确更改克隆助手的 css 边距

Question

我在设置克隆助手 div 元素的 css 边距属性时遇到问题。

下例中一共有三个框：绿框是拖拽的物品存放区，蓝框是拖放区，红框是拖拽的地方。我想将项目放置在绿框的中间，但允许拖动的项目在靠近所有边框的红框中移动。

所以绿色框架中的所有项目都有 css margin: 8px auto，对于克隆的助手，我尝试使用 ui.helper.css('margin', '0' 将 margin 更改为 0 ).问题是拖动的item不想移动到红框的右下角

HTML:

<div id="main-container">
<div id="stock">
<div class="block">drag me to the right bottom corner of the red border</div>
</div>
<div id="workspace">
</div>
</div>

CSS:

#main-container {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
border: 2px solid #ff0000;
}

#stock {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
width: 180px;
border: 2px solid #00ff00;
}

#workspace {
position: absolute;
top: 5px;
left: 185px;
bottom: 5px;
right: 5px;
border: 2px solid #0000ff;
}

.block {
height: 100px;
width: 150px;
border: 1px solid #2e6f9a;
position: relative;
box-shadow: 2px 2px 19px #e0e0e0;
border-radius: 8px;
opacity: 0.8;
filter: alpha(opacity=80);
background-color: white;
text-align: center;
font-weight: bold;
transition: background-color 0.25s ease-in;

margin: 8px auto;
}

JavaScript:

$('.block').draggable({
appendTo: '#main-container',
containment: $('#main-container'),
helper: 'clone',
cursor: 'move',
revertDuration: 100,
revert: 'invalid',
start: function(ev, ui) {
    ui.helper.css('margin', '0');
    ui.helper.css('background-color', 'red');
}
});

$('#workspace').droppable({
accept: '.block',
tolerance: 'fit'
});

Answer 1

边距：8px auto 是罪魁祸首。删除它并添加

position:relative;
right:-10px;
top:10px;

将 !important 添加到 start 函数的边距即

ui.helper.css('margin', '0 !important');

Answer 2

我认为问题出在 jquery-ui 本身。 ui.helper.css('margin', '0') 完成了它的工作，但这绝对不够，因为 jquery-ui 在创建克隆助手时错误地确定了鼠标指针在克隆助手上的位置。

这个解决方案并不简单，但它确实有效。首先从 .block css 中删除 margin: 8px auto; 并创建新的 class 样式

.margin_8px_auto {
    margin: 8px auto;
}

然后将此样式添加到具有 .block 样式的元素中

<div class="block margin_8px_auto">drag me to the right bottom corner of the red border</div>

最后，将javascript代码改成如下：

$('.block').draggable({
    appendTo: '#main-container',
    containment: $('#main-container'),
    helper: 'clone',
    cursor: 'move',
    revertDuration: 100,
    revert: 'invalid',
    helper: function(ev, ui) {
        var $elem = $(this);
        var pos = $elem.offset();
        var dX = ev.pageX - pos.left;
        var dY = ev.pageY - pos.top;

        $elem.removeClass('margin_8px_auto');
        $clone = $elem.clone();

        $(this).draggable("option", "cursorAt", {
            left: dX,
            top: dY
        });

        return $clone;
    },
    start: function(event, ui) {
        ui.helper.css('background-color', 'red');
        $(this).addClass('margin_8px_auto');
    }
});

$('#workspace').droppable({
    accept: '.block',
    tolerance: 'fit'
});

You can find jsfiddle project here

jquery-ui 可拖动：正确更改克隆助手的 css 边距

jquery-ui draggable: change clone helper's css margin correctly

html

css

jquery

jquery-ui

jquery-ui-draggable