javascript - jQuery Drag plugin - Prevent dropping of a drag element on the top of another -


मैं jQuery के प्लूंस का उपयोग करता हूं और

देखिए (केवल एक संदर्भ प्रश्न आंदोलन को सीमित करने के बारे में नहीं है एक कंटेनर)

क्या किसी अन्य तत्व के शीर्ष पर एक ड्रैग तत्व को छोड़ना संभव है? लेकिन इसे दूसरे पर खींच लिया जा सकता है।

जब आप event.drag के साथ क्या चाहते हैं पूरा कर सकते हैं / ड्रॉप स्क्रिप्ट यह भी आसानी से jquery ui - draggable / droppable का उपयोग कर किया जाता है।

घटना के लिए।, अगर आप अपने मानदंड (या इसके विपरीत) से मेल खाता है, तो आपको झूठी वापसी की जरूरत है:

  $ ('# drag1')। ड्रॉप ("init", फ़ंक्शन () {if ($ (this) .is ('# baddiv')) वापस लौटा;})  

यहां jquery UI संस्करण है, इसमें $ () में स्वीकार विकल्प में बनाया गया है। ड्रॉपपैबल फ़ंक्शन - यह चयनकर्ताओं को भी स्वीकार करता है यह उदाहरण ऊपर के पीछे है उपरोक्त आप कहीं भी ले जा सकते हैं लेकिन बुराडिव, जबकि नीचे दिए गए इस उदाहरण से आप कहीं भी नहीं जा सकते हैं, लेकिन परिभाषित डॉपटाबल:

स्क्रिप्ट:

  $ ("# खींचें 1, # ड्रैग 2 ")। Draggable ({revert: 'invalid'}); $ ("# ड्रॉप")। Droppable ({स्वीकार करें: '# ड्रैग 1', ड्रॉप: फ़ंक्शन (इवेंट, यूआई) {// ड्रॉप पर होने वाला}}});  

html:

  & lt; div id = "drop" शैली = "चौड़ाई: 300px; ऊंचाई: 300px; पृष्ठभूमि: नीला" & gt; & lt; / div & gt; & Lt; div id = "drag1" शैली = "चौड़ाई: 50px; ऊंचाई: 50 पीएक्स; पृष्ठभूमि: हरा" & gt; & lt; / div & gt; & Lt; div id = "drag2" शैली = "चौड़ाई: 50px; ऊंचाई: 50 पीएक्स; पृष्ठभूमि: पीला" & gt; & lt; / div & gt;  

यह एक बड़ा droppable क्षेत्र बनाता है, लेकिन यह केवल ड्रैग 1 के draggable आईडी को स्वीकार करेगा। इस आशय को देखने के लिए आपको अपने ड्रैग करने योग्य में विकल्प की आवश्यकता है। इस मामले में मैंने इसे अमान्य में सेट किया है ताकि ड्रैग करने योग्य अपनी मूल स्थिति में वापस स्लाइड हो जाए अगर ड्रॉप मान्य न हो।

मुझे आपकी सटीक आवेदन के बारे में सुनिश्चित नहीं है, लेकिन शायद यह आपको सही में बताएगा

मेरा मानना ​​है कि सॉर्टटेबल समान सेटअप का उपयोग करता है, लेकिन इसमें डिविज़ को जोड़ने और तालिकाओं का समायोजन करने के साथ अधिक है।


Comments

Popular posts from this blog

wpf - Line breaks and indenting for the XAML of a saved FlowDocument? -

gtk - Python Window Resize -

c# - read full xml file data over tcp -