jquery-ui 可拖动 : change clone helper's css margin correctly

Question

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

下例中一共有三个框:绿框是拖拽的元素存放区，蓝框是拖放区，红框是拖拽的地方。我想将元素放在绿色框架的中间，但允许拖动的元素在靠近所有边框的红色框架中移动。

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

你可以找到jsfiddle project here

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