如何在不使用jQuery UI的情况下使元素可拖动？
我有这个代码：
<script type="text/javascript">
function show_coords(event)
{
var x=event.clientX;
var y=event.clientY;
var drag=document.getElementById('drag');
drag.style.left=x;
drag.style.top=y
}
</script>
<body style="height:100%;width:100%" onm ousemove="show_coords(event)">
<p id="drag" style="position:absolute">drag me</p>
</body>
问题是我想在用户按下鼠标按钮时拖动.我尝试过mousedown,但结果是否定的.
解决方法:
当你得到这个概念时,这将非常容易.
function enableDragging(ele) {
var dragging = dragging || false, //Setup a bunch of variables
x, y, Ox, Oy,
enableDragging.z = enableDragging.z || 1,
current;
ele.onmousedown = function(ev) { //When mouse is down
current = ev.target;
dragging = true; //It is dragging time
x = ev.clientX; //Get mouse X and Y and store it
y = ev.clientY; // for later use.
Ox = current.offsetLeft; //Get element's position
Oy = current.offsetTop;
current.style.zIndex = ++enableDragging.z; //z-index thing
window.onmousemove = function(ev) {
if (dragging == true) { //when it is dragging
var Sx = ev.clientX - x + Ox, //Add the difference between
Sy = ev.clientY - y + Oy; // 2 mouse position to the
current.style.top = Sy + "px"; // element.
current.style.left = Sx + "px";
return false; //Don't care about this.
}
};
window.onmouseup = function(ev) {
dragging && (dragging = false); //Mouse up, dragging done!
}
};
}
enableDragging(document.getElementById("drag")); //draggable now!
var ele = document.getElementsByTagName("div");
for(var i = 0; i < ele.length; i++){ //Every div's is draggable
enableDragging(ele[i]); // (only when its "position"
} // is set to "absolute" or
// "relative")
http://jsfiddle.net/DerekL/NWU9G/
您的代码无效的原因是因为< div>将始终跟随光标所在的位置,并且您实际上并未拖动它.左上角将始终跟随您的光标,这不是我们想要的.
UPDATE
现在,如果您只想要一个抓取器或类似的东西,只需更改脚本的这一部分：
ele.onmousedown = function(ev) {
current = ev.target;
至
var grabber = document.createElement("div");
grabber.setAttribute("class", "grabber");
ele.appendChild(grabber);
grabber.onmousedown = function(ev) {
current = ev.target.parentNode;
现在,您只需单击抓取器即可开始拖动过程.
http://jsfiddle.net/DerekL/NWU9G/7/