CODEWITHSUNDEEP
jquerydraggablemousemove
baitas212123
baitas212123

Reputation: 151

jQuery .draggable without clicking

I'm doing draggable div. I'm using jquery UI .draggable function fot that, but this is not exactly that what I need. 

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

I need that the DIV would be draggable without clicking on it (function working with mousemove) . Also I need to remove drag cursor, what is the function for that what I want?

Upvotes: 1

Views: 699

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206555

EDIT

Looks better without jQuery UI at least works in 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
  });

});

Upvotes: 1

Related Questions