我被告知要完成 UI 效果,应该是这样的:
第一:
- 页面上有两到三栏,每一栏都有很多elem(例如:div) 专栏,
- 并且列内的所有这些元素都应该是可拖动的,并且
同时该列应该自动对所有元素进行排序。
第二个:
- 将元素从一列拖动到另一列时,拖动的元素 元素应该移动到我的光标指向的列,
- 当放下这个元素时,应该会产生以下效果: 掉落的 elem 周围的 elem 会将“位置”动画化到 原来拖动的elem所在的位置。
enableDrag
我发现的函数是这样的:
function enableDragging(ele) {
var dragging = dragging || false,
x, y, Ox, Oy,
current;
enableDragging.z = enableDragging.z || 1;
ele.onmousedown = function(ev) {
current = ev.target;
current.style.position = "absolute";
dragging = true;
x = ev.clientX;
y = ev.clientY;
Ox = current.offsetLeft;
Oy = current.offsetTop;
current.style.zIndex = ++enableDragging.z;
console.log(dragging);
window.onmousemove = function(ev) {
if (dragging == true) {
var Sx = ev.clientX - x + Ox,
Sy = ev.clientY - y + Oy;
current.style.top = Sy + "px";
current.style.left = Sx + "px";
return false;
}
};
window.onmouseup = function(ev) {
dragging && (dragging = false);
}
};
}
但是我应该如何继续,我实际上不知道获取 elem 的位置,什么将替换原始拖动的 elem 的位置...
主要是,我想用原始 Javascript 编写所有这些效果,但是 jQuery 也可以!
我是 JS 新手,这是我应该弄清楚的最大项目!
有人可以帮我解决这个问题吗?
最佳答案
您尝试过 jQuery UI“可排序”小部件吗?听起来它可以满足您的大部分需求。
特别参见“connected list ”演示。
关于javascript - 拖动元素时,如何获取要替换的元素的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11502590/