HTML5 拖放。检测元素被抓取的位置
HTML5 Drag and drop. Detecting where element was grabbed
我正在使用 HTML 5 拖放 API,并实现可排序列表和自动滚动。对于某些功能,我希望能够检测到元素的哪一部分被抓取了
这是插图
任何帮助将不胜感激,谢谢
您可以使用计算出的元素的 padding+width 和 MouseEvent 的 offsetX
属性 来计算所选区域。
yourElement.addEventListener('mousedown', function onDragStart(event){
let width = parseInt(window.getComputedStyle(yourElement).getPropertyValue('width'));
let padding = parseInt(window.getComputedStyle(yourElement).getPropertyValue('padding-left'));
let position = event.offsetX;
let middle = (width / 2) + padding;
if (position <= middle) {
console.log('left');
} else {
console.log('right');
}
});
查看此 jsfiddle 示例:https://jsfiddle.net/c23Lu6gy/28/
我正在使用 HTML 5 拖放 API,并实现可排序列表和自动滚动。对于某些功能,我希望能够检测到元素的哪一部分被抓取了
这是插图
任何帮助将不胜感激,谢谢
您可以使用计算出的元素的 padding+width 和 MouseEvent 的 offsetX
属性 来计算所选区域。
yourElement.addEventListener('mousedown', function onDragStart(event){
let width = parseInt(window.getComputedStyle(yourElement).getPropertyValue('width'));
let padding = parseInt(window.getComputedStyle(yourElement).getPropertyValue('padding-left'));
let position = event.offsetX;
let middle = (width / 2) + padding;
if (position <= middle) {
console.log('left');
} else {
console.log('right');
}
});
查看此 jsfiddle 示例:https://jsfiddle.net/c23Lu6gy/28/