Question

我正在尝试使用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>

Answer 1

Custom draggable Live demo

$(function(){

    var $el = $('#draggable1'),
        $par = $(window),        // $el move -> available area
        atX,atY,wW,wH,
        elW = $el.outerWidth(true),
        elH = $el.outerHeight(true);

    $el.on('mousedown', function(e) {
      var off = $el.offset();
      wW = $par.width();
      wH = $par.height();
      atX = e.pageX - off.left;
      atY = e.pageY - off.top;
      $(document).on('mousemove',moveHandler).on('mouseup',stopHandler);      
    });     

    function moveHandler(e) {
      var X = e.pageX-atX;
      var Y = e.pageY-atY;
      X = Math.min( Math.max(0, X), wW-elW); // remove this lines if you don't
      Y = Math.min( Math.max(0, Y), wH-elH); // need to restrict movement
      $el.css({left: X, top: Y});
    }       
    function stopHandler() {
       $(document).off('mousemove',moveHandler).off('mouseup',stopHandler);
    }

});

对于更多元素来说没有多少用途，所以你可以玩耍并扩展一下这一点我创建basic PLUGIN使用如下：

$(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);

Answer 2

为了使对象可拖动，我强烈建议使用像JQuery UI这样的库。

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

Answer 3

尝试使用http://jqueryui.com/draggable/

它易于使用..

<!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>

Answer 4

同上以上关于使用jQuery或其他已经解决过的库。但对于您特定的代码，看起来您一遍又一遍地绑定和解除绑定事件处理程序？为什么？这可能会导致不良行为。如果你真的需要条件行为，最好使用一个变量来保护一个事件处理程序的状态，如果状态是活动的，只需让它返回而不做任何事情。

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

4 个答案: