jQuery: मैं कोड में ड्रैग और ड्रॉप अनुकरण कैसे करूं?

Question

संपादित करें: http://www.singingeels.com/jqtest/

मैं एक बहुत ही सरल पेज का संदर्भ देता है jQuery-1.3.2.js, ui.core.js (नवीनतम संस्करण) और ui.draggable.js है: यहाँ एक लिंक तुम मेरे नमूना कोड को दिखाने के लिए है (नवीनतम संस्करण भी)।

<div id="myDiv">hello</div> 

और फिर जावास्क्रिप्ट में:

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

यह पूरी तरह से काम करता है है

मैं एक div है कि मैं बहुत आसानी से चारों ओर खींच सकते हैं (बेशक माउस का उपयोग) है। लेकिन, मुझे अकेले कोड का उपयोग करके 'ड्रैग और ड्रॉप' अनुकरण करने में सक्षम होना चाहिए। मेरे पास यह ज्यादातर काम कर रहा है, लेकिन समस्या यह है कि फायरिंग की घटनाएं प्लेसहोल्डर घटनाएं हैं।

आप "ui.core.js" खोलने के लिए और नीचे तक स्क्रॉल हैं ... आप इस देखेंगे:

// These are placeholder methods, to be overriden by extending plugin 
_mouseStart: function(event) { }, 
_mouseDrag: function(event) { }, 
_mouseStop: function(event) { }, 
_mouseCapture: function(event) { return true; } 

क्यों घटनाओं मेरी अनुकरण में ठीक से लागू नहीं किया जा रहा है, लेकिन जब आप माउस के साथ नीचे क्लिक करें, वे हैं? - _mouseDrag को मजबूर करने के तरीके पर कोई विचार: "ui.draggable.js" में ओवरराइडिंग एक्सटेंशन का पालन करने के लिए संपत्ति?

यह हल करना बहुत बड़ा होगा - और मैं बाद में प्रमुख लाभ दिखाने की योजना बना रहा हूं।

धन्यवाद, -Timothy

संपादित करें: http://www.singingeels.com/jqtest/

संपादित करें 2: यहाँ आप मेरी नमूना कोड को दिखाने के लिए एक लिंक भी है ऊपर है कि लिंक और स्रोत-देखें क्लिक करें ... आप क्या देखेंगे मैं मैं करने की कोशिश कर रहा हूँ। यहां एक स्निपेट है:

$(document).ready(function() { 
    var myDiv = $("#myDiv"); 

    myDiv.draggable(); 

    // This will set enough properties to simulate valid mouse options. 
    $.ui.mouse.options = $.ui.mouse.defaults; 

    var divOffset = myDiv.offset(); 

    // This will simulate clicking down on the div - works mostly. 
    $.ui.mouse._mouseDown({ 
     target: myDiv, 
     pageX: divOffset.left, 
     pageY: divOffset.top, 
     which: 1, 

     preventDefault: function() { } 
    }); 
}); 

Answer 1

question in the JQuery forum about it है। इसे लिखने के समय हल नहीं किया गया है, लेकिन भविष्य में अधिक जानकारी हो सकती है।

---

संपादित करें: यह मंच पर जवाब था:

मैं तुम्हें जो क्या jQuery यूआई इकाई परीक्षण खींचें और ड्रॉप के लिए उपयोग करता है अनुकरण प्लगइन का उपयोग की सलाह देते हैं:

https://github.com/jquery/jquery-ui/blob/master/external/jquery-simulate/jquery.simulate.js

आप के उदाहरण देख सकते हैं से इकाई को देखकर उस के लिए rdworth को

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/core.js

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/events.js

धन्यवाद परीक्षण करती है।

Answer 2

आपको उस कोड को दिखाने की ज़रूरत है जिसे आप "अनुकरण" करने के लिए उपयोग कर रहे हैं। मेरा आंत वृत्ति आपको उचित डीओएम घटनाओं को बनाने और उन्हें आग लगाने की आवश्यकता होगी, लेकिन मुझे नहीं पता कि jQuery में कृत्रिम घटनाओं को इंजेक्शन देने की सुविधा है या नहीं।

क्या आप सीधे ईवेंट हैंडलर को कॉल कर सकते हैं?

Answer 3

मुझे एक समाधान मिला जो बहुत अच्छी तरह से काम करता है। मेरे पास ड्रॉप इवेंट कॉल है जिसे onDragAndDrop() कहा जाता है। उस फ़ंक्शन में दो तर्क होते हैं, draggable jQuery ऑब्जेक्ट और droppable jQuery ऑब्जेक्ट।

$('.my-drop-target').droppable({ 
    drop: function(event, ui) { 
     onDragAndDrop(ui.draggable, $(event.target)); 
    } 
}); 

मेरे परीक्षण में, मैं एक समारोह है कि सीधे onDragAndDrop कहता है, लेकिन लगता है कि एक माउस के साथ एक उपयोगकर्ता है कि कार्रवाई का प्रदर्शन कैसा होता बनाता है।

var simulateDragAndDrop = function(draggable, droppable) { 
     if (!draggable.data('uiDraggable')) { 
      throw new Error('Tried to drag and drop but the source element is not draggable!'); 
     } 
     if (!droppable.data('uiDroppable')) { 
      throw new Error('Tried to drag and drop but the target element is not droppable!'); 
     } 
     onDragAndDrop(draggable, droppable); 
    } 

मैंने इसे यूनिट परीक्षणों के लिए एक अच्छा, उपयोग में आसान समाधान पाया है। मैं शायद कीबोर्ड-सुलभ फॉलबैक के लिए इसका उपयोग कर समाप्त कर दूंगा।