Question

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

以下示例中有三个框架：绿色框架是拖动的项目存储，蓝色框架用于拖放，红色框架限制拖动的位置。我想将项目放在绿框的中间，但是让拖动的项目在靠近所有边框的红框中移动。

因此绿色框架中的所有项目都有css边距：8px auto，对于克隆的帮助器我尝试使用ui.helper.css将边距更改为0（＆＃39; margin＆＃39;，＆＃39; 0＆＃ 39）。问题是被拖动的项目不想移动到红框的右下角。

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到边距即

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

Answer 2

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

解决方案并非无足轻重，但可行。首先从.block css中删除margin: 8px auto;并创建新的类样式

.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 draggable：正确更改克隆助手的css边距

2 个答案: