JQuery kullanarak fareyle div nasıl taşınır?

Question

Ekranı hatırlamak için fareyle bir div taşıyabilmeli ve div'in yeni konumunu saklayabilmem gerekir. Nasıl yapabilirim?

Answer 1

jQuery UI ürününe ve sürüklenebilir etkileşime göz atmanızı öneririm. Sonra durdurma durumunda sizin gerekli davranışı koymak,

$("#draggable").draggable(); 

Ve: Temelde (o id = "sürüklenebilir" vardır varsayarak) sürüklenebilir div kod eklemek isteyeceksiniz. Daha spesifik olarak, bunu yapmak istiyorum:

$('#draggable').draggable({ 
    stop: function(event, ui) { ... } 
}); 

veritabanı depolama gelince, yukarıdaki işlevinde bir AJAX çağrısını kullanabilirsiniz veya bazı form gönderebilir veya başka şekilde, sayfa içi saklayın olabilir eylem, sunucuya aktarılan ve diğer verilerle satır içi olarak saklanan konum bilgisiyle sonuçlanır. Bir AJAX çağrısına dikkat etmeliyim, çünkü her bir tarayıcıda her sürükleme ile db'nizi konum verileriyle bombalayabilirsiniz. Uygulamanıza bağlı olarak değişir ...

Answer 2

Burada jQuery UI kullanarak değil sadece jQuery kullanarak divleri sürüklemenize izin vermek için yazdığım biraz jQuery işlevi.

/* PlugTrade.com - jQuery draggit Function */ 
/* Drag A Div with jQuery */ 
jQuery.fn.draggit = function (el) { 
    var thisdiv = this; 
    var thistarget = $(el); 
    var relX; 
    var relY; 
    var targetw = thistarget.width(); 
    var targeth = thistarget.height(); 
    var docw; 
    var doch; 

    thistarget.css('position','absolute'); 


    thisdiv.bind('mousedown', function(e){ 
     var pos = $(el).offset(); 
     var srcX = pos.left; 
     var srcY = pos.top; 

     docw = $('body').width(); 
     doch = $('body').height(); 

     relX = e.pageX - srcX; 
     relY = e.pageY - srcY; 

     ismousedown = true; 
    }); 

    $(document).bind('mousemove',function(e){ 
     if(ismousedown) 
     { 
      targetw = thistarget.width(); 
      targeth = thistarget.height(); 

      var maxX = docw - targetw - 10; 
      var maxY = doch - targeth - 10; 

      var mouseX = e.pageX; 
      var mouseY = e.pageY; 

      var diffX = mouseX - relX; 
      var diffY = mouseY - relY; 

      // check if we are beyond document bounds ... 
      if(diffX < 0) diffX = 0; 
      if(diffY < 0) diffY = 0; 
      if(diffX > maxX) diffX = maxX; 
      if(diffY > maxY) diffY = maxY; 

      $(el).css('top', (diffY)+'px'); 
      $(el).css('left', (diffX)+'px'); 
     } 
    }); 

    $(window).bind('mouseup', function(e){ 
     ismousedown = false; 
    }); 

    return this; 
} // end jQuery draggit function // 

jQuery işlevi, div'in sınırların dışına çıkmasını da engeller. Temel olarak, onu sürükleme aktivatörü olarak hedeflediğiniz bir div'a eklersiniz (örneğin başlık çubuğu). bunu çağırma bu kadar basittir:

$("#titleBar").draggit("#whatToDrag"); 

Yani #titleBar senin başlık çubuğu div id olacağını ve #whatToDrag sürüklemeye istediğini kimliği olacaktır. Dağınık kod için özür dilerim, bunu hackledim ve jQuery UI'ye bir alternatif sunacağını düşündüm, yine de uygulamayı kolaylaştıracağım.

Answer 3

Çok fazla nesne varsa, mousemove pahalı olabilir. Çözmenin bir adımı, işleyiciyi mousedown'a bağlamak ve fareyle üzerine yazmaktır. Bu örnek, pek çok nesne ile yazılmış ve test edilmemiştir; Özellikle, geçerli açımlama, daha önce bağlanmış olan her şeyi (lambda ifadesinin isimlendirilmesiyle ve bu ismin çözülmeyerek çözülmesiyle çözülebilir) çözer.

jQuery.fn.dragdrop = function (el) { 
    this.bind('mousedown', function (e) { 
     var relX = e.pageX - $(el).offset().left; 
     var relY = e.pageY - $(el).offset().top; 
     var maxX = $('body').width() - $(el).width() - 10; 
     var maxY = $('body').height() - $(el).height() - 10; 
     $(document).bind('mousemove', function (e) { 
      var diffX = Math.min(maxX, Math.max(0, e.pageX - relX)); 
      var diffY = Math.min(maxY, Math.max(0, e.pageY - relY)); 
      $(el).css('left', diffX + 'px').css('top', diffY + 'px'); 
     }); 
    }); 
    $(window).bind('mouseup', function (e) { 
     $(document).unbind('mousemove'); 
    }); 
    return this; 
}; 
$(document).ready(function() { 
    return $('#obj').dragdrop('#obj'); 
}); 

Veya Parenscript içinde

: Eğer tarayıcılar testler ve tüm bu barbut ile pisliği istemiyorum eğer

(setf (chain j-query fn dragdrop)                      
     (lambda (el)                          
     (chain this                          
       (bind :mousedown                       
        (lambda (e)                      
         (let ((rel-x (- (chain e page-x) (chain ($ el) (offset) left)))         
          (rel-y (- (chain e page-y) (chain ($ el) (offset) top)))         
          (max-x (- (chain ($ :body) (width)) (chain ($ el) (width)) 10))       
          (max-y (- (chain ($ :body) (height)) (chain ($ el) (height)) 10)))       
         (chain ($ document)                   
           (bind :mousemove                  
             (lambda (e)                  
             (let ((diff-x (min max-x (max 0 (- (chain e page-x) rel-x))))     
               (diff-y (min max-y (max 0 (- (chain e page-y) rel-y)))))     
              (chain ($ el) (css :left (+ diff-x :px)) (css :top (+ diff-y :px))))))))))) 
     (chain ($ window)                        
       (bind :mouseup                       
        (lambda (e)                      
         (chain ($ document)                    
           (unbind :mousemove)))))                 
     this))