JqueryUI Sortable - सबलिस्ट (3 पॉस) के भीतर केवल आइटम ले जाने की कार्यक्षमता
मैं जंकरी सॉर्टेबल का उपयोग करके एक विशिष्ट कार्यक्षमता सेट करने का प्रयास कर रहा हूं। मैं करीब लग रहा है, लेकिन एक मुद्दा मार रहा है। मुझे खाता प्रकारों के तहत केवल 3 पदों पर ले जाने के लिए उप-विषयों की आवश्यकता है
http://jsfiddle.net/Davos8549/x6f0upng/1/
मैं केवल यह चाहता हूं कि उप-आइटम को अन्य सूचियों में खींचने में सक्षम होना चाहिए - जिनकी श्रेणी = "hasItems" है
मैं अभी भी अपने मुख्य कंटेनर "एसेट" के भीतर एआर, वीजेड, बैंक को स्थानांतरित करने में सक्षम होना चाहिए। लेकिन मुझे पूरी चीज़ को एक सबलिस्ट में नहीं छोड़ना चाहिए (जो कि अब मुझे समस्या है)।
Asset
AR
subitem2-1
subitem3-15
subitem3-25
subitem2-2
subitem2-3
subitem2-4
VZ
subitem3-1
subitem3-2
subitem1-35
subitem3-3
subitem3-4
Bank
subitem1-1
subitem1-2
subitem3-45
subitem1-3
subitem1-4
Liability
Bank5
subitem1-15
subitem1-25
subitem1-45
AR5
subitem2-15
subitem2-25
subitem2-35
subitem2-45
VZ5
subitem3-35
मेरा मानना है कि समाधान इस कोड में हो सकता है:
<script>
$(function() { $('ul.mainlist').sortable({
connectWith: 'ul.mainlist',
beforeStop: function(ev, ui) {
if ($(ui.item).hasClass('hasItems') && $(ui.placeholder).parent()[0] != this) {
$(this).sortable('cancel'); } } }); $('ul.sublist').sortable({
connectWith: 'ul.sublist'
});
});
</script>
जवाब
आपको अपने DOM तत्वों की पहचान करने के साथ और अधिक विशिष्ट होने की आवश्यकता है जिन्हें आप स्थानांतरित करना चाहते हैं:
पहले मैंने आपके html में कुछ छोटे बदलाव किए हैं, समूह "समूह" को <li>समूह बैंक और दायित्व के टैग में जोड़ दिया है , जिससे उन्हें पहचानना आसान हो गया है।
मैंने क्लास को "कनेक्टेड" भी सब्बलिस्ट्स के साथ जोड़ दिया, जिसे मैं इंटरचेंजेबल बनाना चाहता हूं, कि एक उदाहरण के रूप में आपके पास दोनों हो सकते हैं, इंटरचेंजेबल सबमिट्स को एक सबटाइम्स के रूप में अच्छी तरह से पूरा कर सकते हैं, जो केवल अपने स्वयं के समूह के भीतर सॉर्टेबल हैं। यह वर्ग "कनेक्टेड" sortable()फ़ंक्शन connectWithकार्यक्षमता में उपयोग किया जाता है , कनेक्ट सूची देखें
यदि कोई समूह खाली हो जाता है, तो आपको आइटम को उस खाली समूह में वापस ले जाने में सक्षम होने के लिए न्यूनतम ऊंचाई को परिभाषित करने की आवश्यकता है।
तब मैंने इस प्रकार को बदल दिया:
$(function() { $('li.group ul.sublist').sortable({
});
$('.hasItems ul.sublist').sortable({
connectWith: ".connected"
}).disableSelection();
});
जो अब आपके अनुरोध के अनुसार आगे बढ़ने की अनुमति देता है।
विवरण के लिए फिडेल की जाँच करें या
$(function() {
$('li.group ul.sublist').sortable({ }); $('.hasItems ul.sublist').sortable({
connectWith: ".connected"
}).disableSelection();
});
body
{
font-family: Arial, Tahoma, San-Serif;
font-size: 12px;
}
ul {
padding: 0;
list-style-type: none;
}
p
{
margin: 0 0 20px;
}
ul.mainlist
{
float: left;
margin: 0 20px 0 0;
width: 100px;
}
ul.mainlist li
{
background: #fff;
border: solid 1px #ccc;
padding: 10px;
width:100%;
}
ul.sublist
{
min-height: 35px;
background: gold;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<p>sublists shouldn't be able to be dragged out of their normal list</p>
<ul id="list1" class='mainlist'>
<li class="group">Asset
<ul class="sublist">
<li class="hasItems">Bank
<ul class="sublist connected">
<li>subitem1-1</li>
<li>subitem1-2</li>
<li>subitem1-3</li>
<li>subitem1-4</li>
</ul>
</li>
<li class="hasItems">AR
<ul class="sublist connected">
<li>subitem2-1</li>
<li>subitem2-2</li>
<li>subitem2-3</li>
<li>subitem2-4</li>
</ul>
</li>
<li class="hasItems">VZ
<ul class="sublist connected">
<li>subitem3-1</li>
<li>subitem3-2</li>
<li>subitem3-3</li>
<li>subitem3-4</li>
</ul>
</li>
</ul>
</li>
<li class="group">Liability
<ul class="sublist">
<li class="hasItems">Bank5
<ul class="sublist connected">
<li>subitem1-15</li>
<li>subitem1-25</li>
<li>subitem1-35</li>
<li>subitem1-45</li>
</ul>
</li>
<li class="hasItems">AR5
<ul class="sublist">
<li>subitem2-15</li>
<li>subitem2-25</li>
<li>subitem2-35</li>
<li>subitem2-45</li>
</ul>
</li>
<li class="hasItems">VZ5
<ul class="sublist">
<li>subitem3-15</li>
<li>subitem3-25</li>
<li>subitem3-35</li>
<li>subitem3-45</li>
</ul>
</li>
</ul>
</li>
</ul>