Javascript 如何制作自定义可拖动脚本_Javascript_Jquery_Html

Javascript 如何制作自定义可拖动脚本

javascript jquery html

Javascript 如何制作自定义可拖动脚本,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试使用Javascript使对象可拖动。幸运的是，我成功地建造了我想要的东西。每次运行代码时，我都可以将该对象拖拽大约8/11次，然后我的浏览器开始冻结。我试过使用chrome、Firefox和safari，但在10次拾取对象并离开后，它们都冻结了。我访问了jquery网站，确保所有功能都以正确的方式使用。我找不到发生这一切的任何原因。有人能帮忙吗 <html> <head> <script src='http://code.jqu

我正在尝试使用Javascript使对象可拖动。幸运的是，我成功地建造了我想要的东西。每次运行代码时，我都可以将该对象拖拽大约8/11次，然后我的浏览器开始冻结。我试过使用chrome、Firefox和safari，但在10次拾取对象并离开后，它们都冻结了。我访问了jquery网站，确保所有功能都以正确的方式使用。我找不到发生这一切的任何原因。有人能帮忙吗

<html> 
    <head>
        <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
        <style>
            .draggable {
                width:400px;
                height:30px;
                background-color:black;
                position:absolute;
                top:10px;
                left:1px;
            }
        </style>
        <script type='text/javascript'>
            function moveobject() {
                $(document).mousemove(function(event) {
                    $("#draggable1").css("top", event.pageY - plustop);
                    $("#draggable1").css("left", event.pageX - plusleft);
                });
                $("#draggable1").click(function() {
                    $(document).unbind();
                    $("#draggable1").click(moveobject);
                });
            }
            $(document).ready(function() {
                $("#draggable1").click(function() {
                    $("#draggable1").mousemove(function(e) {
                        var top = $("#draggable1").css("top");
                        var left = $("#draggable1").css("left");
                        top = top.replace("px", "");
                        left = left.replace("px", "");
                        plusleft = (e.pageX - left)
                        plustop = (e.pageY - top)
                        $(this).unbind("mousemove");
                    });
                    moveobject();
                });
            });
        </script>
    </head>
    <body>
        <div class='draggable' id='draggable1'></div>
    </body>
</html>


.拖拉{
宽度：400px；
高度：30px；
背景色：黑色；
位置：绝对位置；
顶部：10px；
左：1px；
}
函数moveobject（）{
$（文档）.mousemove（函数（事件）{
$（“#draggable1”）.css（“top”，event.pageY-plustop）；
$（#draggable1”）.css（“左”，event.pageX-plusleft）；
});
$（“#draggable1”）。单击（函数（）{
$（文档）.unbind（）；
$（“#拖动表1”）。单击（移动对象）；
});
}
$（文档）.ready（函数（）{
$（“#draggable1”）。单击（函数（）{
$（“#draggable1”）.mousemove（函数（e）{
var top=$（“#draggable1”）.css（“top”）；
var left=$（“#draggable1”）.css（“left”）；
top=top。替换（“px”和“）；
左=左。替换（“px”和“）；
plusleft=（e.pageX-左）
plustop=（e.pageY-顶部）
$（此）.unbind（“mousemove”）；
});
moveobject（）；
});
});

要使对象可拖动，我强烈建议使用类似的库

它添加了您正在寻找的功能，您无需再次处理这些挑剔的问题。

尝试使用

它很容易使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
        #draggable { width: 150px; height: 150px; padding: 0.5em; }
    </style>
    <script>
        $(function() {
            $( "#draggable" ).draggable();
        });
    </script>
</head>
<body>
    <div id="draggable" class="ui-widget-content">
        <p>Drag me around</p>
    </div>
</body>
</html>


jQuery UI可拖动-默认功能
#可拖动{宽度：150px；高度：150px；填充：0.5em；}
$（函数（）{
$（“#可拖动”）.draggable（）；
});
把我拖来拖去

同上，关于使用jQuery或其他已经解决了这个问题的库。但对于特定的代码来说，您似乎在一次又一次地绑定和解除绑定事件处理程序？为什么？这可能会导致不良行为。如果确实需要条件行为，最好使用一个变量来保护一个事件处理程序的状态，如果状态为活动状态，则让它返回而不执行任何操作。

对于更多的元素，没有太多的通用性，因此您可以在这一点上进行调整和扩展
我创建了一个类似于：

$(function(){
  $('#draggable1').dragg({containment:window});
  $('#draggable2').dragg(); // not contained
  $('#test').dragg({containment:"#par"});
});

插件：

(function($) {   
    $.fn.extend({        
        dragg: function(opt) {
          var S = { 
            containment: false
          };
          opt = $.extend(S, opt);

return this.each(function(){
    var $el=$(this),atX,atY,atXP=0,atYP=0, wW=0,wH=0,
        elW=$el.outerWidth(true),
        elH=$el.outerHeight(true),
        $cont = S.containment;

    $el.on('mousedown', function(e) {
      var off = $el.offset();
      if($cont && $cont!==window){
        var parOff = $($cont).offset();
        atXP = parOff.left;
        atYP = parOff.top;
      }
      wW = $($cont).width();
      wH = $($cont).height();
      atX = e.pageX - off.left;
      atY = e.pageY - off.top;
      $(document).on('mousemove',move).on('mouseup',stop);                
    });

    function move(e) {
      var X=e.pageX-atXP-atX, Y=e.pageY-atYP-atY;
      if($cont){
          X = Math.min( Math.max(0, X), wW-elW);
          Y = Math.min( Math.max(0, Y), wH-elH);
      }
      $el.css({left: X, top: Y});
    }
    function stop() {
       $(document).off('mousemove',move).off('mouseup',stop);
    }

});

        }
    });  
})(jQuery);

+1为实际演示如何执行此操作而不是仅仅指向库。请您向我解释为什么绑定和解除绑定会导致错误和不受欢迎的行为？虽然可以这样做，但我不确定是否应该这样做。我不知道注册和注销事件处理程序的速度是否真的会特别快。也许没什么大不了的，我不知道。但是仅仅在函数上使用一个标志会更快（而不是操纵处理事件侦听器的大型数据结构），并且更容易调试。基本上，我关心的是动态地更改代码，而不是它运行的状态。

(function($) {   
    $.fn.extend({        
        dragg: function(opt) {
          var S = { 
            containment: false
          };
          opt = $.extend(S, opt);

return this.each(function(){
    var $el=$(this),atX,atY,atXP=0,atYP=0, wW=0,wH=0,
        elW=$el.outerWidth(true),
        elH=$el.outerHeight(true),
        $cont = S.containment;

    $el.on('mousedown', function(e) {
      var off = $el.offset();
      if($cont && $cont!==window){
        var parOff = $($cont).offset();
        atXP = parOff.left;
        atYP = parOff.top;
      }
      wW = $($cont).width();
      wH = $($cont).height();
      atX = e.pageX - off.left;
      atY = e.pageY - off.top;
      $(document).on('mousemove',move).on('mouseup',stop);                
    });

    function move(e) {
      var X=e.pageX-atXP-atX, Y=e.pageY-atYP-atY;
      if($cont){
          X = Math.min( Math.max(0, X), wW-elW);
          Y = Math.min( Math.max(0, Y), wH-elH);
      }
      $el.css({left: X, top: Y});
    }
    function stop() {
       $(document).off('mousemove',move).off('mouseup',stop);
    }

});

        }
    });  
})(jQuery);