Функция инкапсуляции не работает в jQuery

Я хочу инкапсулировать функцию, ее можно вызвать напрямую, сделать ее объектом (например: $ ('. Box')) можно перетаскивать.Функция инкапсуляции не работает в jQuery

это мой код:

$.fn.drag = function() { 
 
    var movebox = $(this); 
 
    movebox.onmousedown = function() { 
 
    var moveX = event.clientX, 
 
     moveY = event.clientY, 
 
     ofX = movebox.offsetLeft, 
 
     ofY = movebox.offsetTop, 
 
     newmovX = moveX - ofX, 
 
     newmovY = moveY - ofY; 
 
    document.onmousemove = function() { 
 
     var moveX = event.clientX, 
 
     moveX_1 = event.clientX - newmovX, 
 
     moveY_1 = event.clientY - newmovY; 
 
     movebox.style.top = moveY_1 + "px"; 
 
     movebox.style.left = moveX_1 + "px"; 
 
    }; 
 
    document.onmouseup = function() { 
 
     document.onmousemove = function() {}; 
 
     document.onmouseup = function() {}; 
 
    } 
 
    } 
 
} 
 
$(".box").drag();

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>

вопрос: Когда я использую его, он не работает, и это не входит в '' OnMouseDown function.why? Я новый пользователь, который может помочь мне решить эту проблему? Спасибо!

источник

2015-10-09 web_wolf

Во-первых, пожалуйста, укажите * актуальный * код в вопросе, а не его фотографию. Во-вторых, что именно не работает? Нам нужно знать, что он делает, и что вы ожидаете от этого. –

wait Я также отправлю код изображения ....;) – Jai

@Rory McCrossan благодарит вас за советы –

Я думаю, что когда вы используете JQuery для initializethe уаг movebox, вы должны использовать JQuery, чтобы получить и установить его свойство:

movebox.onmousedown ----> movebox.mousedown (функция (. событие)
movebox.offsetLeft ----> movebox.offset() левый

Чтобы переместить окно, вы должны установить смещение, но не топ стиль CSS коробки: `movebox.offset ({top: moveX_1, left: moveY_1});

Результат приведен в фрагменте кода, вы должны его улучшить.

$(document).ready(function(){ 
 
    $.fn.drag = function(){ 
 
     var movebox = $(this); 
 
     movebox.bind('mousedown.drag',function(event){ 
 
      var moveX = event.clientX; 
 
      var moveY = event.clientY; 
 
      var ofX = movebox.offset().left; 
 
      var ofY = movebox.offset().top; 
 
      var newmovX = moveX - ofX; 
 
      var newmovY = moveX - ofY; 
 
      $('body').bind('mousemove.drag', function(event){ 
 
       var moveX = event.clientX; 
 
       var moveX_1 = event.clientX - newmovX; 
 
       var moveY_1 = event.clientY - newmovY; 
 
       movebox.offset({top: moveX_1, left: moveY_1}); 
 
      }); 
 
      $('body').bind('mouseup.drag',function(){ 
 
       //document.onmousemove = function(){}; 
 
       //document.onmouseup = function(){}; 
 
       $(document).unbind('mousemove.drag mouseup.drag'); 
 
      }); 
 
     }); 
 
    }; 
 
    $.fn.undrag = function(){ 
 
     $(this).unbind('mousedown.drag'); 
 
    } 
 
    $(".box").drag(); 
 
});

  .box { 
 
       width: 50px; 
 
       height: 50px; 
 
       top: 100px; 
 
       background-color: yellow; 
 
       }


 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>The code</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
 
    <body> 
 
    <div class="box"> 
 
     
 
    </div> 
 
    </body> 
 
</html>

источник

2015-10-09 10:07:42 Aroniaina

О, круто, спасибо большое –

передать переменную события обработчикам.

movebox.onmousedown = function(event){ 
document.onmousemove=function(event){ 
document.onmouseup=function(event){

источник

2015-10-09 09:32:30

Посмотрите на консоли JavaScriupt в вашем браузере. Я уверен, что у вас много сообщений об ошибках для чтения. Вы смешиваете jQuery и Native DOM. Вы не указали event в любом месте.

var movebox = $(this); >//jquery object 
movebox.onmousedown = function() { <--jquery does not have onmousedown

JQuery имеет mousedown

movebox.on("mousedown", function (event) { 
    //your code here 
});

Другой вопрос, вам придется, если вы снова связать что-то, второй один будет взрывать ваш первый экземпляр, так как вы являетесь обязательными в связи с событиями документов.

источник

2015-10-09 12:51:34 epascarello

да, я новый jser, поэтому иногда я смешиваю его ~ спасибо –

Функция инкапсуляции не работает в jQuery

ответ

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