मैं jQuery में एक तत्व खींचने योग्य कैसे बना सकता हूं?

Question

मैं एक तत्व कैसे बना सकता हूं, उदा। एक div, jQuery का उपयोग कर खींचने योग्य?

Answer 1

पहले लोड jQuery यूआई:

<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> 

तब का उपयोग jQuery यूआई draggable method:

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

Answer 2

आप केवल jQuery के साथ कर सकते हैं, jQuery यूआई के बिना:

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); 

Answer 3

मैं बस पूरे jQuery UI में "ड्रैगिंग" की बजाय इसे बहुत पोर्टेबल बना दिया।

यह नीचे खींचते समय टेक्स्ट का चयन नहीं करता है, इसलिए यह वास्तव में अन्य कोड के विपरीत उत्पादन में काम करता है।

यह भी काफी अच्छी तरह से तय हो गई तैनात तत्वों के साथ काम करता है तो आप "डॉक" कर सकते हैं

$.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; 
}; 

लेकिन यह पूर्ण हो जाती है या निश्चित स्थिति पहले से ही तत्व के लिए लागू किया जाता है।

इतना है कि यह प्रयोग करें:

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