jquery - jQuery .draggable 无需点击

Question

我正在做可拖动的div。我正在使用 jquery UI .draggable 函数，但这并不是我所需要的。

$('.magic_background').draggable({
            cursor: 'move', 
            containment: '.magic_movable'
        }); 

我需要 DIV 无需单击即可拖动（使用 mousemove 的功能）。另外我需要删除拖动光标，我想要的功能是什么？

Answer 1

编辑

没有 jQuery UI看起来更好，至少在 Chrome 中有效。

现场演示

$(function(){

  var $par = $('.magic_movable'),
      $bg = $('.magic_background'),
      parW = $par.outerWidth(),
      parH = $par.outerHeight(),
      bgW = $bg.width()/2,
      bgH = $bg.height()/2,
      X, Y, posX, posY;

  var drag = 0; // flag


  $par.on('mousemove', function( e ){
    X = e.clientX - $(this).offset().left; // get mouse X position inside parent
    Y = e.clientY - $(this).offset().top;  // get mouse Y position inside parent
    posX = Math.min( Math.max(0, X-bgW), parW-(bgW*2) ); // containment X
    posY = Math.min( Math.max(0, Y-bgH), parH-(bgH*2) ); // containment Y
    if(drag){
       $bg.css({left:posX, top:posY}); // move element only if flag is true (1)
    }
  }).on('mouseleave', function(){
    drag = 0;                  // stop draggable on parent mouseleave
  });

  $bg.on('mouseenter', function( e ){
     drag = 1;                 // make draggable on mouseenter
  });

});