एचटीएमएल 5 खींचें और छोड़ें घटनाओं और setDragImage ब्राउज़र समर्थन

Question

मैं एक small jQuery plugin कि देशी एचटीएमएल 5 खींचें के साथ jQuery यूआई खींचने योग्य/droppable व्यवहार की नकल करता और घटनाओं ड्रॉप पर काम कर रहा हूँ।

एक विशेषता मैं जोड़ सकते हैं, नोड जो खींचें प्रॉक्सी के रूप में काम करेगा निर्दिष्ट करने की क्षमता है।

मैंने थोड़ा सा शोध किया, और according to MDN, ऐसा करने के लिए setDragImage() का उपयोग किसी छवि या तत्व को पास करने की आवश्यकता है।
विभिन्न ब्राउज़रों में setDragImage के लिए समर्थन क्या है?

मैं वहाँ जो एक अलग की तुलना में मैं इस समस्या के लिए उम्मीद लेता jquery.event.drag नाम के एक प्लगइन है ध्यान दिया है।
इस सुविधा से ऊपर प्लगइन की तरह वैकल्पिक हल के कुछ प्रकार बनाने के लिए मुझे की आवश्यकता होगी, या बाहर के बॉक्स अधिकांश या सभी ब्राउज़रों में setDragImage का उपयोग करना संभव होना चाहिए?

संपादित

इस कार्यक्षमता के साथ एक सा चारों ओर खेलने के बाद, यह प्रतीत होता है इस समारोह काफी सीमित है।

काफी कुछ ब्राउज़रों में कोई समर्थन नहीं है, एक मनमाना डोम तत्व का उपयोग के रूप में सहायक डोम पेड़ और दृश्य में होने के लिए ऐसा करना आवश्यक हो, और इसलिए आप तत्व में ही शरीर पर है इसके अलावा

, और की एक प्रति यह हैंडलर के रूप में। यह इस तरह के प्लगइन के लिए ज्यादातर अवांछित है।

इसके अलावा अधिक, प्रतिपादन भी समस्याग्रस्त यहाँ तक कि जब सही शब्दों से मुलाकात कर रहे है। <span>TEST</span> से एक सहायक बनाने की कोशिश करते समय, सहायक ने केवल span के आयामों के साथ एक सफेद आयताकार दिखाया।

क्या ये समस्याएं चश्मा के अनुसार अपेक्षित थीं? क्या उन्हें कोड में तय किया जा सकता है या क्या उन्हें कामकाज की आवश्यकता होगी?

Answer 1

setDragImage IMO किसी भी गैर तुच्छ खींचें और ड्रॉप उपयोग के मामले के लिए एक महत्वपूर्ण विशेषता है। उदाहरण के लिए एक बहु चयन सूची पर विचार करें जहां ड्रैग को सभी चयनित आइटमों को शामिल करने की आवश्यकता होती है न केवल उस पंक्ति को जो ड्रैग इशारा किया गया था। यह अजीब बात है कि आप जिस चीज को सेट करना चाहते हैं उसे डीओएम में दिखाना आवश्यक है, लेकिन इससे भी बदतर यह है कि यह विधि आईई में संस्करण 11 के रूप में लागू नहीं की गई है।

हालांकि, कुछ प्रयासों के साथ मैं सक्षम था इसे संतोषजनक रूप से संतोषजनक तरीके से काम करें। कस्टम ड्रैग छवि नोड को टाइमआउट 0 फ़ंक्शन में DOM से हटाया जा सकता है। तो इसे ड्रैगस्टार्ट में DOM में जोड़ें, फिर इसे सेट ड्रैग छवि में उपयोग करें और फिर इसे हटा दें। यह एफएफ में पूरी तरह से काम करता है लेकिन क्रोम में ड्रैग छवि नोड टाइमआउट आग से पहले झिलमिलाहट करेगा। इसे रोकने के लिए एक तरीका यह है कि इस तरह की स्थिति यह है कि वास्तविक ब्राउज़र जेनरेट की गई ड्रैग छवि बिल्कुल उसी स्थान पर दिखाई देगी, यह उतना बुरा नहीं है जितना लगता है क्योंकि आप कर्सर से संबंधित कस्टम ड्रैग छवि की स्थिति को नियंत्रित कर सकते हैं।

मैं हाल ही में इसके साथ खेल रहा था और इसे आईई पर भी काम करने में सक्षम था। आईई को कस्टम ड्रैग छवि नोड खींचने के लिए चाल है, न कि ड्रैगस्टार्ट पर चलने वाले नोड को। आप इसे आईई विशिष्ट ड्रैगड्रॉप() विधि के साथ कर सकते हैं।

अंतिम बात यह जानना है कि विंडोज़ पर कस्टम ड्रैग छवि नोड की चौड़ाई पर 300 पीएक्स सीमा है, यह वास्तव में कस्टम नोड न केवल सभी ड्रैगगेबल्स पर लागू होती है। इसलिए यदि ड्रैग छवि बहुत बड़ी है तो ब्राउज़र एक भारी रेडियल ढाल लागू करता है।

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

$(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"); 
}); 

});