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

How to make a custom draggable script

本文关键字：拖动 脚本 何制作 自定义      更新时间：2024-04-04

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

自定义可拖动实时演示

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

对于更多的元素来说，没有太多的通用性，所以你可以四处玩耍并扩展一点
基本的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);

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

它增加了你想要的可拖动功能，你不必再处理这些挑剔的部分。

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

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

相关文章：