没有点击的jQuery .draggable

Question

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

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

我需要DIV在没有点击的情况下可以拖动（使用mousemove工作的功能）。另外我需要删除拖动光标，我想要的功能是什么？

Answer 1

修改

看起来更好没有jQuery UI ，至少适用于Chrome。

<强> LIVE DEMO

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

});