JqueryUI Sortable - सबलिस्ट (3 पॉस) के भीतर केवल आइटम ले जाने की कार्यक्षमता

Nov 23 2020

मैं जंकरी सॉर्टेबल का उपयोग करके एक विशिष्ट कार्यक्षमता सेट करने का प्रयास कर रहा हूं। मैं करीब लग रहा है, लेकिन एक मुद्दा मार रहा है। मुझे खाता प्रकारों के तहत केवल 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>

जवाब

1 Vickel Nov 24 2020 at 20:43

आपको अपने 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>