jQuery拖放时移动
jQuery draggable moves when dropped
我已经设置了一个简单的拖放界面,它实现了克隆功能。我遇到的问题是,当元素被拖到主画布上,然后被放下时,它会突然向右移动,而不是完全放下。
这是javascript:
$(function() {
var x = null;
$("#draggable").draggable({
helper: 'clone',
cursor: 'move',
snap: '.snap-target'
});
$("#canvas").droppable({
drop: function(e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
helper: 'original',
containment: '#canvas',
snap: '.snap-target'
});
x.appendTo('#canvas');
}
}
});
});
我创建了一个jsfiddle:
https://jsfiddle.net/kuyn6gmc/
如果您尝试将蓝色框拖动到主画布中,然后释放鼠标,您将看到框如何稍微向右"弹出"。在画布中移动长方体时,效果良好。在小提琴上,它没有浏览器上的全宽那么糟糕,我认为这是相对于视口的总宽度。
如果有人知道为什么会发生这种情况,我将不胜感激:)
谢谢Michael
之所以会出现这种情况,是因为可拖动元素在拖动时相对于视口处于绝对位置。一旦元素被附加,定位就相对于#canvas
元素(因为position: relative
),这就是为什么当你放下它时元素会移动的原因。
正如另一个答案所建议的那样,您可以从元素中删除position: relative
,但是,可能不会在所有情况下都起作用。我建议在添加元素之前考虑元素的位置。
更新示例
例如,可以减去偏移的顶部/左侧位置以及边界的宽度。在这样做的过程中,#canvas
元件仍然可以被相对定位。
var canvasOffset = {
'top': parseInt($(this).offset().top, 10) + parseInt($(this).css('border-top-width'), 10),
'left': parseInt($(this).offset().left, 10) + parseInt($(this).css('border-left-width'), 10)
}
$draggble.css({
"top": parseInt($draggble.css('top'), 10) - canvasOffset.top + 'px',
"left": parseInt($draggble.css('left'), 10) - canvasOffset.left + 'px'
}).appendTo('#canvas');
您必须将position: relative
放入body
而不是canvas
。
.draggable { padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; position: relative; }
.small { border: 1px solid slateblue; width: 115px; height: 115px; background: #c5cae9 }
.ui-widget-header p, .ui-widget-content p { margin: 0; }
.text-box { text-align: center; vertical-align: middle; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, serif; font-size: 13px }
#canvas { width: 600px; height: 300px; border: 1px solid #cccccc; margin: auto;
clear: both; }
.draggable-selectors { margin: 10px auto; width: 1000px; }
body { position: relative; margin: 0; }
<body class='snap-target'>
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- HTML/CSS-用于拖放的全页面覆盖
- Rubaxa可与聚合物进行排序/拖放不起作用,具体取决于显示器:
- dblclick事件是在jquery拖放后触发的
- 无法进行拖放以使用本地存储
- 如何使用Java脚本创建提交按钮's的拖放功能
- Chrome原生拖放相对容器并不能正确渲染重影
- 在web应用程序ASP.net中拖放和移动图像
- 重新拖放库是否支持移动设备
- HTML - 如何在固定上下文中在移动设备上拖放
- 拖放元素可以移动 x 但不能移动 y
- 哪一个更适合拖放调整大小移动
- jQuery拖放时移动
- 如何使拖放列表复制而不是移动列表项
- 在移动设备上拖放使用一些代码来翻译事件(包括代码),但正常事件不起作用
- 在使用.css移动一个对象后,重置所有可放物品以允许可拖放物品
- 拖放表-将单元格移动到不同的列
- 拖放表单/上下移动表单
- 当将其他可排序项移动到可排序项上时,如何使可排序项表现得像可拖放项