通過(guò)綁定id的一個(gè)div可以拖動(dòng)，如何改為綁定class，實(shí)現(xiàn)多個(gè)div都可以拖動(dòng)，如下圖和代碼

問(wèn)題

實(shí)現(xiàn)多個(gè)div都可以拖動(dòng),例如 <div class="CsOuterDiv"></div>

圖片

代碼

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>讓div在body中可以任意拖動(dòng)-jq22.com</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body {
            background-color: #232429;
        }
        
        .CsOuterDiv {
            width: 256px;
            height: 146px;
            background-color: white;
            position: relative;
            margin-bottom: 40px;
            /* top: 50%;
            left: 50%; */
            /* transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%); */
            border-radius: 5px;
            box-shadow: 3px 3px 10px blue;
        }
    </style>
</head>

<body>
    <div id="idOuterDiv" class="CsOuterDiv">
        可拖動(dòng)
    </div>
    <div class="CsOuterDiv">
        不可以拖動(dòng)
    </div>
    <div class="CsOuterDiv">
        不可以拖動(dòng)
    </div>

    <script>
        function dragFunc(id) {
            var Drag = document.getElementById(id);
            Drag.onmousedown = function(event) {
                var ev = event || window.event;
                event.stopPropagation();
                var disX = ev.clientX - Drag.offsetLeft;
                var disY = ev.clientY - Drag.offsetTop;
                document.onmousemove = function(event) {
                    var ev = event || window.event;
                    Drag.style.left = ev.clientX - disX + "px";
                    Drag.style.top = ev.clientY - disY + "px";
                    Drag.style.cursor = "move";
                };
            };
            Drag.onmouseup = function() {
                document.onmousemove = null;
                this.style.cursor = "default";
            };
        };
        dragFunc("idOuterDiv");
    </script>

</body>

</html>

回答

編輯回答

愿如初

兄弟，我看你引入了jquery，所以我就用jQuery寫(xiě)了一下。
你的思路已經(jīng)是正確的了，在mousedown事件觸發(fā)時(shí)，對(duì)相應(yīng)元素綁定mousemove拖拽事件。在mouseup事件觸發(fā)時(shí)，取消對(duì)應(yīng)的綁定事件。
親測(cè)可用。

$(document).on('mousedown','.CsOuterDiv',function(event){
        console.log("鼠標(biāo)按下事件");
        var disX= event.clientX ;
        var disY= event.clientY ;
        //綁定拖動(dòng)事件
        $(document).on('mousemove','.CsOuterDiv',function(event){
            event.target.style.left = event.clientX - disX + "px" ;
            event.target.style.top = event.clientY- disY+ "px" ;
        })
})
$(document).on('mouseup','.CsOuterDiv',function(event){
        console.log("鼠標(biāo)抬起事件");            
        //取消拖動(dòng)事件的綁定
        $(document).off('mousemove','.CsOuterDiv');
})

2017年7月28日 18:52

編輯回答

失魂人

var dragDoms = document.getElementsByClassName('CsOuterDiv');

for(var i = 0;i<dragDoms.length;i++)
    Drags[i].onmousedown = function(){}
    Drag[i].onmouseup = function() {}
};

2017年5月11日 07:10

編輯回答

殘淚

function dragFunc(domOrSelector) {
    var nodeList,nodeListArray;
    if(domOrSelector instanceof HTMLElement || domOrSelector instanceof Element){
        return makeDrag(domOrSelector);
    }else if(typeof domOrSelector === "string"){
        nodeList = document.querySelectorAll(domOrSelector);
        nodeListArray = Array.from(nodeList);
        nodeListArray.forEach(function(dom){
            makeDrag(dom)
        });
    }else{
        throw new Error("參數(shù)有誤")
    }
    
    function makeDrag(Drag){
        // 以下舊邏輯原封不動(dòng)照抄
        Drag.onmousedown = function(event) {
            var ev = event || window.event;
            event.stopPropagation();
            var disX = ev.clientX - Drag.offsetLeft;
            var disY = ev.clientY - Drag.offsetTop;
            document.onmousemove = function(event) {
                var ev = event || window.event;
                Drag.style.left = ev.clientX - disX + "px";
                Drag.style.top = ev.clientY - disY + "px";
                Drag.style.cursor = "move";
            };
        };
        Drag.onmouseup = function() {
            document.onmousemove = null;
            this.style.cursor = "default";
        };
        return Drag;
    }
}

然后你按自己的套路來(lái)
比如所有class="abc"的