Как создать собственный перетаскиваемый скрипт

Я пытаюсь сделать объект перетаскиваемым с помощью Javascript. к счастью, мне удалось построить то, что я хотел. каждый раз, когда я запускаю код, я могу взять и перетащить объект примерно на 8/11 раз, после чего мой браузер начнет замерзать. Я пробовал использовать хром, Firefox и сафари, которые они замораживали примерно через 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>

источник

2013-12-06 user3072635

Попробуйте использовать 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>

источник

2013-12-06 01:37:05 Hardy

Чтобы сделать объект перетаскиваемым, я настоятельно рекомендую использовать библиотеку как JQuery UI.

Он добавляет функциональность draggable, которую вы ищете, и вам не придется иметь дело с этими фиктивными битами снова и снова.

источник

2013-12-06 01:35:56 Coder101101010

Ditto выше об использовании JQuery или какой-либо другой библиотеке, которая уже работала на это. Но для вас конкретный код, похоже, вы снова и снова привязываете и отключаете обработчики событий? Зачем? Это, вероятно, приведет к нежелательному поведению. Если вам действительно нужно условное поведение, лучше использовать переменную для защиты состояния одного обработчика событий и просто вернуть его, ничего не делая, если состояние активно.

источник

2013-12-06 01:53:35 DrLivingston

Не могли бы вы объяснить мне, почему привязка nd unbinding приведет к нежелательному поведению? – user3072635

Хотя это можно сделать, я не уверен, что это должно быть сделано. Я не знаю, является ли скорость регистрации и отмены регистрации обработчиков событий тем, что действительно обещано быть особенно быстрым. Может быть, это неважно, я не знаю. Но просто использовать флаг в функции было бы намного быстрее (вместо того, чтобы манипулировать большими структурами данных, которые обрабатывают прослушиватели событий), и было бы легче отлаживать. В основном я обеспокоен тем, что вы динамически меняете код, а не состояние, в котором оно работает. – DrLivingston

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"}); 
});

PLUGIN:

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

источник

2013-12-06 02:00:44

+1 для фактического показа, как это сделать, а не просто указывать на библиотеку. –

Как создать собственный перетаскиваемый скрипт

ответ

Смежные вопросы