How do I make an element draggable in jQuery?

开发者_JAVA技巧How do I make an element, e.g. a div, draggable using jQuery?

You can do with jquery only, without jquery UI:

function handle_mousedown(e){

    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).offset();

    function handle_dragging(e){
        var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
        var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
        $(my_dragging.elem)
        .offset({top: top, left: left});
    }

    function handle_mouseup(e){
        $('body')
        .off('mousemove', handle_dragging)
        .off('mouseup', handle_mouseup);
    }

    $('body')
    .on('mouseup', handle_mouseup)
    .on('mousemove', handle_dragging);
}

$('#b').mousedown(handle_mousedown);

First load the jQuery UI:

<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />   
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

Then use jQuery UI draggable method:

<script type="text/javascript">
$(function() {
    $("#b").draggable();
});
</script>

I just cooked this up so its very portable instead of "dragging" in the whole jQuery UI.

It doesn't select text when dragging below it so this actually works in production unlike the other code here.

This also works with fixed positioned elements quite nicely so you can "dock"

$.fn.draggable = function(){
    var $this = this,
    ns = 'draggable_'+(Math.random()+'').replace('.',''),
    mm = 'mousemove.'+ns,
    mu = 'mouseup.'+ns,
    $w = $(window),
    isFixed = ($this.css('position') === 'fixed'),
    adjX = 0, adjY = 0;

    $this.mousedown(function(ev){
        var pos = $this.offset();
        if (isFixed) {
            adjX = $w.scrollLeft(); adjY = $w.scrollTop();
        }
        var ox = (ev.pageX - pos.left), oy = (ev.pageY - pos.top);
        $this.data(ns,{ x : ox, y: oy });
        $w.on(mm, function(ev){
            ev.preventDefault();
            ev.stopPropagation();
            if (isFixed) {
                adjX = $w.scrollLeft(); adjY = $w.scrollTop();
            }
            var offset = $this.data(ns);
            $this.css({left: ev.pageX - adjX - offset.x, top: ev.pageY - adjY - offset.y});
        });
        $w.on(mu, function(){
            $w.off(mm + ' ' + mu).removeData(ns);
        });
    });

    return this;
};

But this assumes absolute or fixed positioning is applied to the element already.

Use it like so:

$('#something').draggable();

Much easier and more understandable without jQuery: html:

<div class="nbe-crop-parent">
  <div class="select-part-image-nbe"><div class="resizeee"></div></div>
</div>

css:

.nbe-crop-parent {
    width: 500px;
    height: 500px;
    position: relative;
    display: flex;
    margin-top: -23px;
    margin-bottom: 10px;
    border: 2px solid black;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.select-part-image-nbe {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    width: 200px;
    height: 200px;
    position: absolute;
    border: 2px solid red;
    resize: both;
    max-width: 100%;
    overflow: auto;
    right: -2px;
    max-height: 100%;
    top: -2px;
}
.resizeee {
    position: absolute;
    z-index: 99;
    width: 95%;
    height: 95%;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: grab;
}

jQuery/js

$(window).ready(function(){
  $('.resizeee').unbind('mousedown mouseup').on('mousedown mouseup',function(e){
     if (e.type == "mousedown") {//to check if mouse is down or released
      $(this).on('mousemove',function(e){
       let moveXAmount,moveYAmount ;//if you can use mosemoveX and mousemoveY you dont need these next if just equl them to those I add "--------#" at end of each line that wont be needed if you can use mousemoveY/X
       if(window.nbePreMoveX){ // "--------#"
        moveXAmount = e.screenX -  window.nbePreMoveX;// "--------#"
        window.nbePreMoveX = e.screenX; // "--------#"
       }else{// "--------#"
        window.nbePreMoveX= e.screenX;// "--------#"
        moveXAmount=0 // "--------#"
       }// "--------#"
       if(window.nbePreMoveY){// "--------#"
        moveYAmount = e.screenY -  window.nbePreMoveY; // "--------#"
        window.nbePreMoveY = e.screenY; // "--------#"
       }else{ // "--------#"
        window.nbePreMoveY= e.screenY; // "--------#"
        moveYAmount=0 // "--------#"
       } // "--------#"
       let parentWidth = $('.nbe-crop-parent').width();
       let parentHeight = $('.nbe-crop-parent').height();
       let selectorWidth = $('.select-part-image-nbe').width();
       let selectorHeight = $('.select-part-image-nbe').height();
       let selectorFromTop  = $('.select-part-image-nbe').position().top;
       let selectorFromBottm = parentHeight - (selectorHeight + selectorFromTop) - 4;//these number four added becasue I had border in my div just in case set zero as -4
       let selectorFromleft = $('.select-part-image-nbe').position().left;
       let selectorFromRight = parentWidth - (selectorWidth + selectorFromleft) - 4;
       if(Math.sign(moveXAmount) === 1 && selectorFromRight - moveXAmount > 0 ){
         $('.select-part-image-nbe').css('right', selectorFromRight - moveXAmount)
       }else if(Math.sign(moveXAmount) === -1 && selectorFromleft > 0){
         $('.select-part-image-nbe').css('right', selectorFromRight - moveXAmount)
       }
       if(Math.sign(moveYAmount) === 1 && selectorFromBottm - moveYAmount > 0 ){
          $('.select-part-image-nbe').css('top', selectorFromTop + moveYAmount)
       }else if(Math.sign(moveYAmount) === -1 && selectorFromTop > 0){
          $('.select-part-image-nbe').css('top', selectorFromTop + moveYAmount)
       }

     })
     $(this).on('mouseleave',function(e){
         $(this).unbind('mousemove');
            window.nbePreMoveX=false; // "--------#"
             window.nbePreMoveY=false; // "--------#"
          })
    }else{
      $(this).unbind('mousemove');
      window.nbePreMoveX=false; // "--------#"
      window.nbePreMoveY=false; // "--------#"
    }
  })
})

you can even ignore many if and line if you can use mousemovment