प्रोग्रामिंग रूप से jQuery UI को ड्रैग करने योग्य ड्रैग कैसे शुरू करें?

Question

माउस एक डाउन स्थिति में है और इसे रिलीज़ होने से पहले मैं एक नया jQuery तत्व बना देता हूं। (Mousedown के बाद)।

मैं jQuery UI का उपयोग करके नए तत्व पर dragging प्रोग्रामेटिक रूप से ट्रिगर करना चाहता हूं, ताकि यह स्वचालित रूप से मेरे माउस आंदोलन के साथ खींचने लगे। मैं रिलीज नहीं करना चाहता हूं और फिर माउस को फिर से क्लिक करना चाहता हूं।

मैं निम्नलिखित की कोशिश की है ...

var element = $("<div />"); 
element.appendTo("body").draggable().trigger("mousedown"); 

... लेकिन यह काम नहीं करता।

क्या किसी को यह पूरा करने के बारे में कोई सुझाव है?

---

अद्यतन: कुछ करने के बाद this question के पोस्टर खोज समान समस्या है। हालांकि सुझाव दिया समाधान है, जो करने के लिए नीचे फोड़े ...

$("body").on("mousedown", function(e) { 
    $("<div />").draggable().appendTo("body").trigger(e); 
}); 

... नहीं रह गया है नवीनतम संस्करण jQuery और jQuery-यूआई में काम करता है और इसके बदले एक अधिकतम कॉल स्टैक पार हो गई त्रुटि उत्पन्न करता है।

Answer 1

यह पूरी तरह एक हैक है, लेकिन यह चाल करने के लिए लगता है:

var myDraggable = $('#mydraggable').draggable(); 

    // Yeah... we're going to hack the widget 
    var widget = myDraggable.data('ui-draggable'); 
    var clickEvent = null; 

    myDraggable.click(function(event){ 
     if(!clickEvent){ 
     widget._mouseStart(event); 
     clickEvent = event; 
     } 
     else { 
     widget._mouseUp(event); 
     clickEvent = null; 
     } 
    }); 

    $(document).mousemove(function(event){ 
    console.log(event); 
    if(clickEvent){ 
     // We need to set this to our own clickEvent, otherwise 
     // it won't position correctly. 
     widget._mouseDownEvent = clickEvent; 
     widget._mouseMove(event); 
    } 
    }); 

Here's the plunker

मेरे उदाहरण एक तत्व है कि पहले से ही मौजूद है बजाय का उपयोग करता है एक बनाने का, लेकिन यह समान रूप से काम करना चाहिए।

Answer 2

आपको प्रश्न में तत्व के लिए mousedown घटना को बांधना है, तो आप ईवेंट को ट्रिगर कर सकते हैं।

http://api.jquery.com/trigger/ से

किसी भी घटना .bind के साथ संलग्न संचालकों() या इसके शॉर्टकट तरीकों में से एक ट्रिगर कर रहे हैं जब इसी घटना होती है। वे मैन्युअल रूप से निकाल दिए जा सकते हैं, हालांकि, .trigger() विधि के साथ। .trigger() के लिए एक कॉल निष्पादित करता है उसी क्रम में संचालकों वे हो सकता है अगर घटना उपयोगकर्ता द्वारा स्वाभाविक रूप से शुरू हो रहा गया:

$('#foo').bind('click', function() { 
     alert($(this).text()); 
    }); 
    $('#foo').trigger('click'); 

Answer 3

माउसओवर पर अपने खींचने योग्य समारोह बनाएं

$('#futureDragableElement').mouseover(function() { 
    $(this).draggable(); 
}); 

चूंकि ड्रैगगेबल प्रारंभिकता पहले से ही हो चुकी है, आपका पहला माउस क्लिक

Answer 4

ड्रैग करने योग्य प्लगइन को हमारे मूसडाउन घटनाओं की अपेक्षा करता है ई इसके नामस्थान और लक्ष्य के रूप में खींचने योग्य वस्तु को इंगित करने के लिए। ईवेंट में इन फ़ील्ड को संशोधित करना jQuery 1.8.3 और jQuery UI 1.9.2 के साथ काम करता है।

$("body").on("mousedown", function(e) { 
    var div = $("<div />").draggable().appendTo("body"); 
    e.type = "mousedown.draggable"; 
    e.target = div[0]; 
    div.trigger(e); 
}); 

यहाँ डेमो: http://jsfiddle.net/maCmB/1/

Answer 5

यदि आप ईवेंट के दौरान तत्व बना रहे हैं तो हैक्स की आवश्यकता नहीं है और वह तत्व बहुत जटिल नहीं है। आप बस उस तत्व के लिए ड्रैगगेबल सेट कर सकते हैं जो mousedown होता है और ड्रैगगेबल सहायक संपत्ति का उपयोग एक सहायक बनाने के लिए करें जो आपका नया तत्व बनने जा रहा है। ड्रैगटॉप पर आप जिस डोमेन को चाहते हैं उस स्थान पर सहायक को क्लोन करें।

$('body').draggable({ 
    helper: function() { 
    return '<div>your newly created element being dragged</div>'; 
    }, 
    stop: function (e,ui) { 
    ui.helper.clone().appendTo('body'); 
    } 
}); 

बेशक आपको सहायक के लिए स्थिति निर्धारित करने की आवश्यकता होगी, इसलिए माउस उस पर है। यह सिर्फ एक बहुत ही बुनियादी उदाहरण है।