[英]How do I find the position of the draggable element relative to the droppable area
I am using HTML5 native drag and drop. 我正在使用HTML5本机拖放。
I am having problems finding the position of the draggable element relative to it's parent container. 我在查找可拖动元素相对于其父容器的位置时遇到问题。
Summary of Task 任务摘要
I have a "position: relative" div which I consider a 'droppable area'. 我有一个“位置:相对” div,我认为它是“可投放区域”。 Inside this div, I have several "position: absolute" image elements which I have marked as draggable.
在该div内,我有几个“位置:绝对”图像元素,我将其标记为可拖动。 I want these images to be freely movable by the user.
我希望这些图像可由用户自由移动。
To set the position of the element I've a listener on the 'dragend'. 为了设置元素的位置,我在“ dragend”上有一个侦听器。
The end top / left variables must be percentage based as opposed to pixel. 末尾的上/左变量必须基于百分比,而不是像素。
Current Attempt 当前尝试
Below you can see my attempt: 在下面可以看到我的尝试:
draggable.addEventListener('dragend', function (event) {
event.preventDefault();
//Gets the position of the two elements relative to the viewport
var droppableBoundingRect = droppable.getBoundingClientRect();
//Establishes the percentage using the droppable height and width
var draggableXPercentage = ((event.clientX - droppableBoundingRect.left) / droppable.clientWidth) * 100;
var draggableYPercentage = ((event.clientY - droppableBoundingRect.top) / droppable.clientHeight) * 100;
//Set the positional elements of the draggable element
event.target.style.top = draggableYPercentage + "%";
event.target.style.left = draggableXPercentage + "%";
}, false);
And here's a JSFiddle of what I was hoping to work, with comments showing what I was expecting each segment to do: 这是我希望工作的一个JSFiddle,其中的注释显示了我期望每个段的工作:
https://jsfiddle.net/oL8yd9Lr/ https://jsfiddle.net/oL8yd9Lr/
Perhaps I'm looking up the wrong tree, in the wrong forest. 也许我在错误的森林中寻找错误的树。 I'd appreciate any guidance.
我将不胜感激。
Found a possible solution. 找到了可能的解决方案。 Its not perfect but should illustrate how you can get the relative position.
它并不完美,但应说明如何获得相对位置。 I may have gone a little overboard but I've commented the important parts.
我可能有些落伍了,但是我已经评论了重要的部分。
;
(function($, undefined) {
var dragging;
$(function() {
$('.dropzone').on({
'dragover dragenter': dragover,
'drop': drop
}).on({
'dragstart': dragstart,
'dragend': dragend
}, '.drag');
});
function dragstart(e) {
e.stopPropagation();
var dt = e.originalEvent.dataTransfer;
if (dt) {
dt.effectAllowed = 'move';
dt.setData('text/html', '');
dragging = $(this);
// Set the position of the mouse relative to the element at 0,0
dt.setDragImage(dragging.get(0), 0, 0);
}
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
if (dt && dragging) {
dt.dropEffect = 'move';
dragging.hide(); // Hide the element while dragging
}
return false;
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
if (dragging) {
var dropzone = $(this);
// Get the offset of the dropzone relative to the window
var offset = dropzone.offset();
// Set the offset of the drag relative to the dropzone
dragging.css({
'top': e.clientY - offset.top,
'left': e.clientX - offset.left
});
dragging.trigger('dragend'); // Trigger the dragend
}
return false;
}
function dragend(e) {
if (dragging) {
dragging.show();
dragging = undefined;
}
}
}(jQuery));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.