• 所有问题

    • 我用JavaScript写了一个拖拽效果，但是总也不好使，是哪里问题呢？

    <html>
    <head>
    <style type='text/css'>
    #div1{width:100px;height:100px;background:red;position:absolute;}
    </style>
    <script>
    window.onload=function(){
    var oDiv = document.getElementById("div1");

    oDiv.onmousedown=function(ev){

    var oEvent = ev||event;
    var disX = oEvent.clientX-oEvent.offsetLeft;
    var disY = oEvent.clientY - oEvent.offsetTop;

    document.onmousemove=function(ev){
    var oEvent = ev||event;
    oDiv.style.left=oEvent.clientX-disX+"px";
    oDiv.style.top=oEvent.clientY-disY+"px";
    }

    document.onmouseUp=function(ev){
    document.onmousemove=null;
    document.onmouseUp=null;
    }

    }

    }
    </script>
    </head>
    <body>
    <div id="div1"></div>
    </body>
    </html>

    举报该问题
    推荐答案   2015-07-05
    <!DOCTYPE html>
    <html>
      <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>
    RunJS 演示代码
    </title>
    <style type='text/css'>
    #div1{
    width:100px;
    height:100px;
    background:red;
    position:absolute;
    }
    </style>
    <script>
    window.onload=function(){
    var oDiv = document.getElementById("div1");

    oDiv.onmousedown=function(ev){

    var oEvent = ev||window.event;
    var disX = oEvent.clientX-oDiv.offsetLeft;
    var disY = oEvent.clientY - oDiv.offsetTop;

    document.onmousemove = function(ev){
    var oEvent = ev||window.event;
    oDiv.style.left=oEvent.clientX-disX+"px";
    oDiv.style.top=oEvent.clientY-disY+"px";
    }

    document.onmouseup=function(ev){
    document.onmousemove=null;
    document.onmouseUp=null;
    }
    }
    }
    </script>
      </head>
    <body>
        <div id="div1">
    </div>
      </body>
    </html>

    温馨提示：答案为网友推荐，仅供参考
    相似回答
    js怎么实现一个拖拽事件答：有几个方法可以来解决.第一,这是以前比较推荐的,我们在移动鼠标时item会跟随鼠标,并占用了mouseover/mousemove等鼠标事件,我们不这样做,只是让item跟随着鼠标,并不占用mouseover等鼠标事件,这样会解决问题,但是这样并不好看,我们还是希望item能直接跟在mouse下. 另一个选择是不做item的拖拽.你可以改变鼠标指针来显示...
    如何使用jQuery Draggable和Droppable实现拖拽功能答：效果如下图所示:因为最终的左侧元素节点是通过Ajax访问后台返回json数据，然后通过Javascript动态生成这种结构，而已不能为动态生成的元素绑定drag事件，也就不能调用draggable方法，所以我使用了一个称之“中间拖拽容易元素”，这div一直在页面上。只是默认不显示，只要用户开始拖拽左侧的元素时，它就出现了。...
    大家正在搜
    实现一个div的拖拽效果vue拖拽效果拖拽效果拖拽效果有几种事件axure做拖动效果axure拖动效果拖曳和拖拽jquery拖拽功能拖拽技巧