无需 jQuery ui 即可拖动答案

【问题标题】：draggable without jQuery ui无需 jQuery ui 即可拖动
【发布时间】：2012-06-13 11:36:42
【问题描述】：

如何在不使用 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%" onmousemove="show_coords(event)">
     <p id="drag" style="position:absolute">drag me</p>
</body>

问题是我想在用户按下鼠标按钮时进行拖动。我试过onmousedown，但结果是否定的。

【问题讨论】：

标签： javascript draggable

【解决方案1】：

当你了解这个概念时，这将是相当容易的。

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> 将始终跟随您的光标所在的位置，而您实际上并没有拖动它。左上角将始终跟随您的光标，这不是我们想要的。

更新

现在，如果您只想要一个抓取器或类似的东西，只需更改这部分脚本：

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/

【讨论】：

谢谢，但我希望在可拖动元素的左上角可以有一个点或任何其他东西，并且只能通过在角落上按住鼠标指针来拖动框，可以告诉我如何去做这个。再次感谢。
太好了，我没想到如果没有 jQuery ui 就可以做到这一点。但我做到了，谢谢你。
谢谢，如果您觉得有帮助，您可以查看投票数下的复选标记。
检查该复选标记是什么意思。请说明我是新用户
最后一个忙，你能设置光标吗，在窗口上移动选项时看到的那个，四个边都有箭头的那个。并告诉检查该复选框是什么意思