JQuery sortable nested sortable divs

इस प्रश्न में इस Nest jQuery UI sortables के साथ कुछ करने के लिए कुछ है, लेकिन मैं इसके साथ अपनी समस्या का समाधान नहीं कर सका।JQuery sortable nested sortable divs

यहां समस्या है: मेरे पास एक मुख्य कंटेनर है जिसमें आइटम शामिल हैं, वे आइटम divs हैं जो समूह रहित समूह या समूह हो सकते हैं, जिनमें अन्य आइटम शामिल हैं। मैं .multiply-group div खींचकर नए समूहों को परिभाषित कर सकता हूं और फिर मैं एक ही समय में सभी समूह को खींच सकता हूं। यह वहाँ नीचे के बजाय बंद हो जाता है जब मैं मुख्य कंटेनर के तल से बाहर पिछले समूह कंटेनर खींचें है https://jsfiddle.net/antoq/n1w6e6ar/2/

समस्या यह है कि मैं मिलता है: कोड यह रहा:

<body> 
    <div class="multiply-container"> 
     <div class="row multiply">Item 1</div> 
     <div class="row multiply">Item 2</div> 
     <div class="row multiply">Item 3</div> 
     <div class="row multiply-group"> Group 1</div> 
     <div class="row multiply">Item 4</div> 
     <div class="row multiply-group"> Group 2 </div> 
     <div class="row multiply">Item 5</div> 
    </div> 

    <script> 

     var groupWrap = function(){ 

      $('.multiply-container').children().each(function(index, item){ 
       if($(item).hasClass('multiply-group')){ 
        $(item).nextUntil('.multiply-group').addBack().wrapAll('<div class="locked"></div>'); 
       } 
      }); 

     }; 

     var updateMultiply = function(){ 

      var $container = $('.multiply-container'); 

      $container.children().each(function(index, item){ 
       if($(item).hasClass('locked')){ 
        $(item).children().each(function(i, elem){ 

         $container.append($(elem)); 

        }); 
        $(item).remove(); 
       } 


      }); 

      groupWrap(); 

      $('.multiply-container').sortable({ 
       connectWith: '.locked', 
       helper: 'clone', 
       placeholder: '.multiply-placeholder', 
       axis: 'y', 
       update: function(){ 
        updateMultiply(); 
       } 
      }); 

      $('.locked').sortable({ 
       connectWith: '.multiply-container, .locked', 
       helper: 'clone', 
       axis: 'y', 
       update: function(){ 
        updateMultiply(); 
       }, 
       receive: function(event, ui){ 

        if($(ui.item).hasClass('locked')){ 
         $(ui.sender).sortable('cancel'); 

         return false; 
        } 

       } 
      }); 

     }; 




     updateMultiply(); 

    </script> 

</body>

और यहाँ एक बेला है वापस मुख्य कंटेनर के लिए हो रही है और की मैं निम्न त्रुटि:

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

किसी की मदद कृपया मुझे समझने कि क्या हो रहा है और कैसे इसे हल करने की है?

स्रोत

2016-02-05 António Quadrado

मैं किसी भी मुद्दे नहीं दिख रहा। इसे पुन: उत्पन्न करने के लिए वास्तव में क्या कदम है? – Thangaraja

मैं इसे पुन: उत्पन्न करने में सक्षम नहीं हूं। आप कौन सा ब्राउज़र उपयोग कर रहे हैं? – Ageonix

मैं दो अजीब व्यवहार देख सकता हूं: 1) ब्लू बॉर्डर का उपयोग करके "ग्रुप 2" खींचकर एक हैंडल के रूप में अक्सर हरे रंग के कंटेनर पतन हो जाता है; उस हरे रंग के कंटेनर के बाहर समूह को छोड़कर सॉर्टिंग तोड़ता है - समूह नीचे रहता है; 2) नीली सीमा का उपयोग करके "ग्रुप 2" को एक हैंडल के रूप में खींचकर और "ग्रुप 1" के अंदर इसे छोड़कर "ग्रुप 2" पूरी तरह से गायब हो जाता है। –

शायद तुम यह overthinking थे जब आप कोडित कि: दो sortables, घटनाओं की अनावश्यक रद्द जोड़ने सूचियों कि पहले से ही जुड़े हुए थे, आदि

पिछले समूह के साथ इस मुद्दे तल पर अटक या गायब होने लग रहा था प्रत्येक सूची अद्यतन पर .sortable() को दोबारा जोड़ने का एक मुद्दा बनें, एक पुनरावृत्ति जो अप्रत्याशित व्यवहार के लिए बनाई गई है। लेकिन बस को हटाने कि पुनरावृत्ति बनाया के रूप में आप उचित रूप में यह करने के उद्देश्य से अपनी सूची से व्यवहार नहीं है, तो कुछ अतिरिक्त रिफैक्टरिंग जरूरी हो गया था:

1) केवल एक .sortable() कॉल का प्रयोग करें, तो परिभाषित जो आइटम sortable होगा (अर्थात् .row और .locked व्यक्ति के लिए और अनुक्रमित क्रमबद्ध क्रमबद्ध)। आपके इरादे के लिए यह पहले से ही पर्याप्त है। यहां एकमात्र समस्या यह है कि एक समूह को दूसरे समूह के बीच में खींचने से एक और घोंसला स्तर जोड़ा गया;

2) अतिरिक्त घोंसले के स्तर को रोकने के लिए, उन्हें फिर से लपेटने से पहले .locked समूहों को अनदेखा करें।

var groupWrap = function() { 
 
    $('.locked').children().unwrap(); 
 
    $('.multiply-container') 
 
    .children().each(function(index, item) { 
 
     if ($(item).hasClass('multiply-group')) { 
 
     $(item).nextUntil('.multiply-group').addBack().wrapAll('<div class="locked"></div>'); 
 
     } 
 
    }); 
 
}; 
 

 
var updateMultiply = function() { 
 

 
    var $container = $('.multiply-container'); 
 

 
    $container.children().each(function(index, item) { 
 
    if ($(item).hasClass('locked')) { 
 
     $(item).children().each(function(i, elem) { 
 

 
     $container.append($(elem)); 
 

 
     }); 
 
     $(item).remove(); 
 
    } 
 
    }); 
 
}; 
 

 
$('.multiply-container').sortable({ 
 
    items: '.row, .locked', 
 
    helper: 'clone', 
 
    axis: 'y', 
 
    update: function() { 
 
    update(); 
 
    } 
 
}); 
 

 
var update = function() { 
 
    updateMultiply(); 
 
    groupWrap(); 
 
}; 
 

 
update();

body { 
 
    background-color: #eee; 
 
    padding: 50px; 
 
} 
 
.multiply { 
 
    height: 45px; 
 
    width: 100%; 
 
    background-color: violet; 
 
    border: 1px solid purple; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.multiply-group { 
 
    height: 25px; 
 
    width: 100%; 
 
    background-color: teal; 
 
    border: 2px solid orange; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.multiply-container { 
 
    background-color: lime; 
 
    padding: 20px; 
 
} 
 
.multiply-placeholder { 
 
    height: 65px; 
 
    width: 100%; 
 
} 
 
.locked { 
 
    padding: 20px; 
 
    background-color: cyan; 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 
<body> 
 
    <div class="multiply-container"> 
 
    <div class="row multiply">Item 1</div> 
 
    <div class="row multiply">Item 2</div> 
 
    <div class="row multiply">Item 3</div> 
 
    <div class="row multiply-group">Group 1</div> 
 
    <div class="row multiply">Item 4</div> 
 
    <div class="row multiply-group">Group 2</div> 
 
    <div class="row multiply">Item 5</div> 
 
    </div> 
 
</body>

स्रोत

2016-02-06 00:13:58

बहुत बहुत धन्यवाद, यही वह है जो मैं प्राप्त करना चाहता था! –

JQuery sortable nested sortable divs

उत्तर

संबंधित मुद्दे