Jquery UI ड्रैगगेबल: माउस स्थिति में सहायक को संरेखित करें

Question

jQuery के साथ मेरे पास एक ड्रैग करने योग्य तत्व है। यह 200 x 40 के आकार के साथ एक div है। बेशक उपयोगकर्ता div में variuos पदों पर क्लिक करके इस div को खींचना शुरू कर सकता है। मुझे जो चाहिए वह है जब स्टार्टड्रैग घटना होती है, सहायक (क्लोन) div हमेशा कर्सर को उसी तरह से गठबंधन किया जाएगा, इससे कोई फर्क नहीं पड़ता कि उपयोगकर्ता ने div को खींचना शुरू किया था।

तो मूसडाउन के बाद हेल्पर के शीर्ष और बाएं मानों को सदनों x और y के समान होना चाहिए। मैं इस इस coffeescript कोड का उपयोग कर की कोशिश की है:

onStartDrag: (e, ui) => 
    ui.helper.css 
     left: e.clientX 
     top: e.clientY 

    console.log(e) 

लेकिन यह काम नहीं करता है और मेरा अनुमान है कि यह है, क्योंकि मानों मैं में डाल सीधे माउस आंदोलन की वजह से खींचने योग्य प्लगइन द्वारा ओवरराइट कर रहे हैं हो रहा है ..

कोई विचार?

Answer 1

अमर के जवाब की कोशिश करने और यह महसूस करने के बाद कि यह droppable के साथ इंटरैक्शन को खराब करता है, मैंने गहरा खोला, और पाया कि cursorAt नामक इसका समर्थन करने के लिए विशेष रूप से एक विकल्प है।

$('blah').draggable 
    helper: -> 
    ... custom helper ... 
    cursorAt: 
    top: 5 
    left: 5 

यह 5 पिक्सेल से ऊपर और कर्सर के बाईं ओर सहायक के ऊपरी-बाएं कोने देता है, और droppable साथ सही ढंग से सूचना का आदान प्रदान।

http://api.jqueryui.com/draggable/#option-cursorAt

और क्रेडिट देना जहाँ क्रेडिट कारण है करते हैं। धन्यवाद, jquery-ui मेलिंग सूची अभिलेखागार!

https://groups.google.com/forum/#!topic/jquery-ui/Evb94G_QvNw

Answer 2

इस तरह की कोशिश की स्थापना,

 start: function (event, ui) { 
       $(ui.helper).css("margin-left", event.clientX - $(event.target).offset().left); 
       $(ui.helper).css("margin-top", event.clientY - $(event.target).offset().top); 
      } 

इस jqFAQ.com पर एक नजर डालें, तो यह आप के लिए और अधिक उपयोगी हो जाएगा।

Answer 3

मैं इस के लिए एक समाधान मिल जाने है और यह बहुत आसान है, यदि आप sortable प्लगइन का उपयोग कर रहे आप इस तरह सहायक स्थिति को ठीक कर सकते हैं:

sort: function(e, ui) { 
    $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY}); 
} 

Answer 4

इस के लिए चाल किया मुझे:

appendTo: 'शरीर'

तो जैसा

:

$(this).draggable({ 
    helper: "clone", 
    cursor: "move", 
    appendTo: 'body' 
});