jQuery ui चयन और sortable

संयुक्त यह मैं क्या मिल गया है:
http://jsfiddle.net/hashie5/vk6rZ/
jQuery ui चयन और sortable

पहली तालिका दूसरे और तीसरे तालिका का एक संयोजन है, और यह इस एक है (लेआउट कोई आपत्ति नहीं है) कि समाप्त होने की जरूरत है।

सेकेंड तालिका क्रमबद्ध (तीर के साथ) है।

तीसरी तालिका चयन योग्य है (तीरों पर क्लिक न करें)।

लक्ष्य यह है: जब आप एकाधिक आइटम चुनते हैं, तो आप उन्हें एक ही समय में सॉर्ट करने में सक्षम होना चाहिए।

यदि टेबल के कारण यह कठिन है, तो सूचियों के साथ एक उदाहरण भी बहुत अच्छा होगा।

सहायक समारोह मैं सभी चयनित (यूआई से चयनित वर्ग) आइटम क्लोनिंग की कोशिश की, लेकिन वह भी गाड़ी था

संपादित करें:
मैं एक नया बेला बनाया: http://jsfiddle.net/hashie5/AZr9Z/
यह अच्छा काम करता है, लेकिन यह नहीं है अभी तक 100% पूर्ण

स्रोत

2012-06-12 Ruben

चेक इस प्लगइन: https://github.com/iamvery/jquery.multisortable और इस प्रश्न ड्रैगगेबल और ड्रॉपपेबल का उपयोग कर एक समाधान है: http://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items – jfrej

धन्यवाद लेकिन मैं अभी भी क्रमबद्ध और selectab का उपयोग करना चाहता हूं सभी कार्यों को उपलब्ध कराने के लिए – Ruben

@ रूबेन: नमस्ते, आप कहते हैं कि क्लोन छोटी है, लेकिन क्या आपने मेरा उदाहरण देखा? यह मेरे लिए अच्छा काम करता है। तुम क्या सोचते हो? –

डेमोhttp://so.devilmaycode.it/jquery-ui-selectable-and-sortable-combined/

नीचे की तरह मुख्य कोड देखो।

sort : function(event, ui) { 
    var $helper = $('.ui-sortable-helper'), hTop = $helper.offset().top, hStyle = $helper.attr('style'), hId = $helper.attr('id'); 
    if (first_rows.length > 1) { 
     $.each(first_rows, function(i, item) { 
      if (hId != item.id) { 
       var _top = hTop + (26 * i); 
       $('#' + item.id).addClass('ui-sortable-helper').attr('style', hStyle).css('top', _top); 
      } 
     }); 
    } 
}, 
start : function(event, ui) { 
    if (ui.item.hasClass('ui-selected') && $('.ui-selected').length > 1) { 
     first_rows = $('.ui-selected').map(function(i, e) { 
      var $tr = $(e); 
      return { 
       tr : $tr.clone(true), 
       id : $tr.attr('id') 
      }; 
     }).get(); 
     $('.ui-selected').addClass('cloned'); 
    } 
    ui.placeholder.html('<td colspan="99">&nbsp;</td>'); 
}, 
stop : function(event, ui) { 
    if (first_rows.length > 1) { 
     $.each(first_rows, function(i, item) { 
      $(item.tr).removeAttr('style').insertBefore(ui.item); 
     }); 
     $('.cloned').remove(); 
     first_rows = {}; 
    } 
    $("#uber tr:even").removeClass("odd even").addClass("even"); 
    $("#uber tr:odd").removeClass("odd even").addClass("odd"); 
}

मुझे यकीन है कि मैं समझ गया कि आप क्या चाहते हैं, वैसे भी क्या कोड वास्तव में क्या करते नहीं कर रहा हूँ:

, एक से अधिक आइटम का चयन करें;
चयनित आइटमों में से एक होवर होल्ड करके;
आप उन चुने गए स्थान को स्थानांतरित करने में सक्षम हैं जहां आप सूची में कभी भी चाहते हैं;
सभी चयनित वस्तुओं के सॉर्ट ऑर्डर को मंथन करना;

आशा है कि आप यही देख रहे हैं।

स्रोत

2012-06-22 08:59:20

मुझे लगता है कि यह है! मैं अब काम पर नहीं हूं लेकिन मैं बेहतर दिखता हूं, – Ruben

कोई विचार है कि मैं प्लेसहोल्डर का विस्तार कैसे कर सकता हूं, इसलिए यदि मैं 2 आइटम चुनता हूं, तो मेरे प्लेसहोल्डर के पास 2 टैग होंगे? – Ruben

और मैं बक्षीस कैसे दे सकता हूं? – Ruben

Ive यह परीक्षण नहीं किया है, लेकिन यहां एक विचार है:

पहली सूची चयन है (लेकिन sortable नहीं) - फिर जब एक चयन समाप्त हो गया है, एक div में चयन लपेट और फिर वह div क्रमबद्ध - इस तरह चयन को तब एक के रूप में खींचना चाहिए।

स्रोत

2012-06-16 11:41:34 Jimmery

एक अच्छा विचार की तरह लगता है, लेकिन मुझे नहीं पता कि यह कैसे करें :) – Ruben

अपने "jsfiddle" AFAICT काफ़ी अच्छा काम करता है ... लेकिन जब भी मैं jQuery-ui से निराश हो annoyingly पाठ बनाम बाकी whatyever यह करना चाहिए का चयन पर जोर, मैं इस स्निपेट को देखें ..

// disables text selection on sortable, draggable items 
$(".sortable").sortable(); 
$(".sortable").disableSelection();

सुनिश्चित नहीं है कि आप "अक्षम" को "सक्षम" पर फ़्लिप कर सकते हैं, लेकिन मेरा $ .02 है। इसके अलावा, एक अच्छा विचार है, अगर किसी के पास लंगड़ा ब्राउज़र/डिवाइस संभवतः "समूह" तत्व के भीतर "निष्क्रिय अनुभाग" को परिभाषित करने के लिए है, तो ड्रैग एक्शन के लिए "हैंडल" प्रदान करने के लिए ... (जैसे कि आपके पहेली के तीर -प्रकार-बातों) या फिर क्या वे क्लिक लगातार आशय का चयन करने के/संपादन के रूप में गलत हो सकता है ...

स्रोत

2012-06-21 05:00:41

$("#list") 
    .sortable({ handle: ".handle" }) 
    .selectable() 
    .find("li") 
    .addClass("ui-corner-all") 
    .prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>");

स्रोत

2013-07-15 14:12:24 user2583831

क्या आप इसके लिए एक काम कर रहे jsfiddle बना सकते हैं? – Ruben

सार मैथ्यू एंडरसन के द्वारा बनाई गई पूरी तरह से काम करता है: https://gist.github.com/mattandersen/9777423

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" /> 

    <style> 
     #list { 
      list-style: none; 
      padding-left: 0; 
     } 

     #list .sort-handle { 
      display: none; 
     } 

     #list .ui-selected .sort-handle 
     { 
      display: inline; 
      padding: 0 0.5em; 
      cursor: pointer; 
     } 

     li.ui-selected { 
      background-color: #8888cc; 
      color: white; 
      font-weight: bold; 
      background-image: none; 
     } 
     li.ui-selecting { 
      background-color: #ccccff; 
      color: white; 
      background-image: none; 
     } 

    </style> 
</head> 
<body> 
    <ul id="list"> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 1</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 2</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 3</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 4</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 5</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 6</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 7</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 8</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 9</li> 
     <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 10</li> 
    </ul> 

    <script> 
     $(function() { 
      $('#list').selectable({ 
       cancel: '.sort-handle' 
      }).sortable({ 
       items: "> li", 
       handle: '.sort-handle', 
       helper: function(e, item) { 
        if (! item.hasClass('ui-selected')) { 
         item.parent().children('.ui-selected').removeClass('ui-selected'); 
         item.addClass('ui-selected'); 
        } 

        var selected = item.parent().children('.ui-selected').clone(); 
        item.data('multidrag', selected).siblings('.ui-selected').remove(); 
        return $('<li/>').append(selected); 
       }, 
       stop: function(e, ui) { 
        var selected = ui.item.data('multidrag'); 
        ui.item.after(selected); 
        ui.item.remove(); 
       } 
      }); 
     }); 
    </script> 
</body>

डेमो:http://jsfiddle.net/ghaq69b3/

स्रोत

2015-04-09 10:15:53

jQuery ui चयन और sortable

उत्तर

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