不单击jQuery .draggable

Question

我在做拖曳式潜水。为此，我使用jquery .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
  });

});