没有jQuery ui的draggable

本文介绍了没有jQuery ui的draggable的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在不使用jQuery UI的情况下使元素可拖动？

How to make a element draggable without using 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 但结果是否定的。

The problem is that I want to drag while the user the pressing the mouse button. I tried onmousedown but results were negative.

推荐答案

这将是相当的很容易获得这个概念。

It will be quite easy as you get the concept.

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")

您的代码无效的原因是因为< div> 将始终跟随您的光标去了，你实际上并没有拖动它。左上角将始终跟随您的光标，这不是我们想要的。

The reason why your code is not working is because the <div> will always follow where your cursor goes, and you are not actually dragging it. The top left corner will always follow your cursor, and this is not we wanted.

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

Now if you only want a grabber or something similar, just change this part of the script:

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;

现在你只能点击抓取器开始拖动过程。

Now you can only click on the grabber to start the dragging process.

这篇关于没有jQuery ui的draggable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

UI的Draggable