ड्रॉपप्रेबल ड्रैगगेबल और आकार बदलने योग्य के साथ Jquery अपेक्षाकृत काम नहीं कर रहा है

Question

आकार बदलने योग्य के साथ ड्रॉपपेल के अंदर JQueryUI ड्रैगगेबल काम नहीं करता है। आइडिया ड्रैग तत्वों को सक्षम करने में सक्षम होना है जिन्हें ड्रैग किया गया है और गिराए गए तत्वों के आकार के साथ div में गिरा दिया गया है।

कार्य कोड:

1. खींचें आकार बदलने
2. कोशिश घसीटा तत्व के अंदर खींचें करने के लिए "जगह छोड़ने के लिए"
   1. प्रयास करें "मुझे खींचें": http://jsfiddle.net/lukaszjg/GvDLh/

      निर्देश समस्या पुन: पेश करने "ड्रॉप करने के लिए स्थान"

   2. फिर से आकार बदलने का प्रयास करें खींचें तत्व -
   के रूप में काम नहीं कर रहा है

कृपया नीचे दिए गए कोड को खोजें जहां #dragme और #droppable संबंधित divs का संदर्भ लें। कोई विचार यह कैसे ठीक करें?

$("#dragme").draggable({ 
helper: 'clone', 
cursor: 'move', 
tolerance: 'fit' 

}); 

var x = null; 
$("#droppable").droppable({ 
drop: function(e, ui) { 

x = ui.helper.clone(); 

x.draggable({ 
helper: 'original', 
containment: '#droppable', 
tolerance: 'fit' 
}); 

x.resizable(); 
x.appendTo('#droppable'); 
ui.helper.remove(); 
} 
}); 

Answer 1

जब आप एक तत्व को पुनराकृत करने योग्य विजेट बाँध, यह कई <div class="ui-resizable-handle"> तत्वों जोड़ देगा। फिर, अपने drop कॉलबैक के अंदर, तो आप इस राशि:

x = ui.helper.clone(); 

कि .ui-resizable-handle तत्वों के साथ ही तत्व है कि आप क्लोन करने के लिए चाहते हैं क्लोन होगा। और फिर एक जोड़ी लाइनों बाद में, आपके पास:

x.resizable(); 

जाहिर है कि कॉल .ui-resizeable-handle तत्वों की उपस्थिति से उलझन में हो जाता है; यह .ui-resizeable-handle तत्वों का एक अतिरिक्त सेट जोड़ देगा, लेकिन वे शायद जेड-इंडेक्स मुद्दों के कारण काम नहीं करेंगे: मूल (संभवतः) उनके ऊपर होंगे और सभी घटनाओं को .ui-resiable-handle तत्वों से नीचे आने से अवरुद्ध करेंगे जिनमें ईवेंट हैंडलर हैं उनसे जुड़ा हुआ है। आप मैन्युअल रूप से हमलावर को निकाल देते हैं <div> रों पहले क्लोन आकार बदलने योग्य बनाने:

x.find('.ui-resizable-handle').remove(); 
x.resizable(); 

तो यह काम करता है:

$("#droppable").droppable({ 
    drop: function(e, ui) { 
     x = ui.helper.clone(); 
     x.draggable({ 
      helper: 'original', 
      containment: '#droppable', 
      tolerance: 'fit' 
     }); 
     x.find('.ui-resizable-handle').remove(); 
     x.resizable(); 
     x.appendTo('#droppable'); 
     ui.helper.remove(); 
    } 
}); 

अपडेट किया गया बेला: http://jsfiddle.net/ambiguous/xZECa/

बस बुला x.resizable('destroy') यह साफ करने के लिए नहीं है काम क्योंकि x आकार बदलने योग्य नहीं है इसलिए कुछ भी नहीं होता है।

इस काम को करने का एक बेहतर तरीका होना चाहिए, लेकिन मुझे नहीं पता कि यह अभी तक क्या है।

Answer 2

मुझे आपके समाधान का प्रयोग करने में कुछ परेशानी थीं लेकिन आपने मुझे रास्ते में रखा ताकि मैं अपनी समस्या और समाधान का वर्णन करूंगा यदि यह किसी और की मदद करता है।

मेरा मामला: प्रत्येक कर्मचारी का प्रतिनिधित्व करने वाले ड्रॉपप्रेबल divs के साथ एक योजना, और कार्यों का प्रतिनिधित्व करने योग्य खींचने योग्य, resizable divs।

समस्या: काफी वही, केवल मेरे "कार्य" पहले से ही ड्रॉपपेल के बच्चे हैं (डेटाबेस से आता है) और बहुत सारे .डेटा() सामान हैं इसलिए क्लोनिंग एक गड़बड़ थी। ड्रॉपपेबल ड्रॉप इवेंट एक त्रुटि फेंकता है "जावास्क्रिप्ट तर्क को परिवर्तित नहीं कर सकता" और मेरे ऐप को किसी और ड्रैग को अवरुद्ध कर देता है।

अपने समाधान को देखने और मेरे मामले में यह पुन: पेश करने में विफल होने के बाद मैं मूल बातें करने के लिए वापस चला गया:

"यदि आप मिल गया एक लकड़हारा बुद्धि एक कुल्हाड़ी का उपयोग करें"।

तो यहाँ सामान है:

$("#dragme").draggable({ 
helper: 'original', //Needed in my case 
cursor: 'move', 
tolerance: 'fit', 

start: function(event,ui){ 
$(this).resizable("destroy");/* The resizable generates troubles to the droppable? 
Well let's remove the problem... 
*/ 
} 

}).resizable({ 
/*All my functions to apply to the task when resized*/ 

});// I'm creating the resizable immediately because needed to attribute more or less time to the task 


$("#droppable").droppable({ 
drop: function(e, ui) { 
/*All my drop functions to manage the task*/ 

//creating the resizable again PROBLEM SOLVED 
$(ui.draggable).resizable({ 
/*All my functions to apply to the task when resized*/ 
}); 

} 
}); 

आशा इस मदद कर सकते हैं

नोट: तो मेरी अंग्रेजी के स्तर के बहुत निश्चित नहीं गलतियों ओ गलत वर्तनी पर "वापस मूल बातें करने के लिए" का संदर्भ लें के मामले में खंड और मुझे माफ कर दो ;-)।

Answer 3

एक बार जब आप तत्व के साथ ".resizable()" संलग्न करते हैं तो पहले ईवेंट को नष्ट कर दें और फिर संलग्न करें। यह काम करेगा। // $ (ele) एक वस्तु है।

 


    $(ele).resizable().resizable("destroy"); 
     $(ele).draggable(); 
     $(ele).resizable({ 
      animate: 'true', 
      ghost: 'true', 
      handles: 'ne, nw, se, sw', 
    });