HTML5 Sürükle ve Bırak olayları ve setDragImage tarayıcı desteği

Question

Yerel HTML5 sürükle ve bırak olayları ile jQuery UI sürüklenebilir/bırakılabilir davranışını taklit eden bir small jQuery plugin üzerinde çalışıyorum.

Eklemek istediğim bir özellik, sürükleme proxy'si olarak kullanılacak düğümü belirleme becerisidir.

Biraz araştırma yaptım ve according to MDN, bunun için bir görüntü veya öğe geçirerek setDragImage() kullanımını gerektirir.
Farklı tarayıcılarda setDragImage desteği nedir?

Bu sorundan beklediğimden farklı olan jquery.event.drag adlı bir eklenti olduğunu fark ettim.
Bu özellik, yukarıdaki eklenti gibi bir tür geçici çözüm yapmamı ister mi, yoksa çoğu tarayıcıda veya tüm tarayıcılarda setDragImage kullanılarak mümkün mü?

bu işlevselliği ile biraz etrafında oynadıktan sonra DÜZENLEME

, fonksiyon oldukça sınırlı olduğunu görünüyor. yardımcı DOM ağacı ve görünür içinde olmasını gerektiriyorsa olarak keyfi bir DOM öğesini kullanarak, epeyce tarayıcılarda hiçbir destek olan ve böylece vücut üzerinde eleman kendisi var yanında

ve bir nüshası arasında işleyici olarak. Bu, bu tür bir eklenti için çoğunlukla istenmeyendir.

Ayrıca, doğru şartlar yerine getirilse bile oluşturma işlemi sorunludur. <span>TEST</span>'dan bir yardımcı oluşturmaya çalışırken, yardımcının kendisi yalnızca span boyutlarına sahip beyaz bir dikdörtgen gösterdi.

Spesifikasyonlara göre beklenen bu sorunlar nelerdir? Kodlara sabitlenebilir mi yoksa bir geçici çözüm gerektirebilir mi?

Answer 1

setDragImage IMO, önemsiz sürükle ve bırak kullanım durumu için hayati bir özelliktir. Örneğin, bir sürükle sürüklemenin yapıldığı satırı değil, seçilen tüm öğeleri içermesi gereken çoklu seçim listesini düşünün. Ayarlamak istediğiniz şeyin DOM'da görünür olması gerektiği, ancak daha da kötüsü, bu yöntemin IE 11 sürümünde IE'de hiçbir şekilde uygulanmadığı gariptir.

Ancak, biraz çaba ile makul bir şekilde tatmin edici çalışmasını sağlayın. Özel sürükle görüntü düğümü, bir zaman aşımı 0 işlevinde DOM'dan kaldırılabilir. öyleyse dragstart'da DOM'a ekleyin, ardından set sürükleme görüntüsünde kullanın ve sonra kaldırın. Bu, FF'de mükemmel çalışır ancak kromda, sürükle görüntü düğümü, zaman aşımına uğramadan önce titreşir. Bunu engellemenin bir yolu, gerçek tarayıcı tarafından oluşturulan sürükleme görüntüsünün tam olarak aynı yerde görüneceği şekilde konumlandırılmasıdır. Bu, özel sürükleme görüntüsünün imlecin karşısındaki konumunu kontrol edebildiğinizden, bu, göründüğü kadar kötü değildir.

Son zamanlarda bu ile oynuyordum ve bunun yanı sıra IE üzerinde çalışmayı başardı. Buradaki hile, özel sürükle görüntü düğümünü sürüklemek için IE'yi almaktır; Bunu IE özel dragDrop() yöntemiyle yapabilirsiniz.

Dikkat edilmesi gereken son şey, pencerelerde, özel sürükle görüntü düğümü genişliğinde 300 piksellik bir sınır bulunmasıdır. Bu, yalnızca özel düğümü değil, tüm sürükleyicilere uygulanır. Böylece, sürükleme görüntüsü çok büyükse tarayıcı ağır bir radyal degrade uygular.

http://jsfiddle.net/stevendwood/akScu/21/

konsepti ve parlak bir geçici çözüm

$(function() { 

(function($) { 
    var isIE = (typeof document.createElement("span").dragDrop === "function"); 
    $.fn.customDragImage = function(options) { 

     var offsetX = options.offsetX || 0, 
      offsetY = options.offsetY || 0; 

     var createDragImage = function($node, x, y) { 
      var $img = $(options.createDragImage($node)); 
      $img.css({ 
       "top": Math.max(0, y-offsetY)+"px", 
       "left": Math.max(0, x-offsetX)+"px", 
       "position": "absolute", 
       "pointerEvents": "none" 
      }).appendTo(document.body); 

      setTimeout(function() { 
       $img.remove(); 
      }); 

      return $img[0]; 
     }; 

     if (isIE) { 
      $(this).on("mousedown", function(e) { 
       var originalEvent = e.originalEvent, 
        node = createDragImage($(this), originalEvent.pageX, originalEvent.pageY); 

       node.dragDrop(); 
      }); 
     } 

     $(this).on("dragstart", function(e) { 

      var originalEvent = e.originalEvent, 
       dt = originalEvent.dataTransfer; 

      if (typeof dt.setDragImage === "function") { 
       node = createDragImage($(this), originalEvent.pageX, originalEvent.pageY); 
       dt.setDragImage(node, offsetX, offsetY); 
      } 
     }); 

     return this; 
    }; 
}) (jQuery); 



$("[draggable='true']").customDragImage({ 
    offsetX: 50, 
    offsetY: 50, 
    createDragImage: function($node) { 
     return $node.clone().html("I'm a custom DOM node/drag image").css("backgroundColor", "orange"); 
    } 
}).on("dragstart", function(e) { 
    e.originalEvent.dataTransfer.setData("Text", "Foo"); 
}); 

});