那些遇到过的问题

Multi-select in the nestedSortable jQuery UI plugin?

And*_*ers 4 jquery jquery-ui multi-select nested-sortable

EDIT 3: Just to summarize what became quite a long question in the hope that someone might find it easier to get the gist of it and be able to help more easily:

What I want is to get the jsfiddle # 2 below (under EDIT 2) to work, in the sense that it should correctly drop multiple items in the right place, when selected and dragged.

Original question:

I'm trying to figure out how to make nestedSortable allow multiple items to be selected. I cannot find any information about it anywhere by Googling, and I cannot figure it out myself.

If anyone knows how to do this, that would be great. I have been looking at this as an example of how to get drag and drop with multiple items to work - this was hard to find in itself!

jsfiddle #1, multi-select with drag and drop but only in a flat element structure: http://jsfiddle.net/2n9xkmg3/

Main jQuery code here:

$(function () {
    $('.droptrue').on('click', 'li', function () {
        $(this).toggleClass('selected');
    });

    $("ul.droptrue").sortable({
        connectWith: 'ul.droptrue',
        opacity: 0.6,
        revert: true,
        helper: function (e, item) {
            console.log('parent-helper');
            console.log(item);
            if(!item.hasClass('selected'))
               item.addClass('selected');
            var elements = $('.selected').not('.ui-sortable-placeholder').clone();
            var helper = $('<ul/>');
            item.siblings('.selected').addClass('hidden');
            return helper.append(elements);
        },
        start: function (e, ui) {
            var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
            ui.item.data('items', elements);
        },
        receive: function (e, ui) {
            ui.item.before(ui.item.data('items'));
        },
        stop: function (e, ui) {
            ui.item.siblings('.selected').removeClass('hidden');
            $('.selected').removeClass('selected');
        },
        update: updatePostOrder
    });

    $("#sortable1, #sortable2").disableSelection();
    $("#sortable1, #sortable2").css('minHeight', $("#sortable1").height() + "px");
    updatePostOrder();
});

function updatePostOrder() {
    var arr = [];
    $("#sortable2 li").each(function () {
        arr.push($(this).attr('id'));
    });
    $('#postOrder').val(arr.join(','));
}
Run Code Online (Sandbox Code Playgroud)

The suggestion for that example I found in a comment in another Stack overflow question:

How do I drag multiple elements at once with JavaScript or jQuery?

So how could I make that multi-select work in nestedSortable plugin?

See https://github.com/ilikenwf/nestedSortable for information about that plugin.

Basically what I want to achieve is dragging and dropping of items (like files and folders, but could be other things too) in a web application, similar to what DropBox and Google Drive has with multiple dragging and dropping of files and folders in their web interfaces.

Except...I need this with the nesting like in the nestedSortable plugin.

Since so many web sites have functionality like that, I pretty much thought there would be a ready-made solution out there, but it has proven remarkably hard to find an answer to even the flat structure dragging and dropping of multiple items, let alone the combination with the nested structure. But there are quite a few of those examples in various web sites too, I just don't know how to achieve it.

Any help greatly appreciated!

EDIT: added the link to the plugin above.

EDIT 2:

I felt like the question needed a much more clear example in order to get help on this issue. So I created a full jsfiddle of my own.

This one takes the jsfiddle referred to above and I have then tried to create a new one, based on the nestedSortable plugin example file: https://github.com/ilikenwf/nestedSortable/blob/2.0alpha/example.html

这是我的新jsfiddle:

jsfiddle#2,ATTEMPT在多选中,拖放嵌套结构:

http://jsfiddle.net/anderszvensson/w141dLLt/1/

我从一个嵌套可排序列表的例子开始.然后我尝试将jsfiddle#1中的多选项合并(只处理平面结构的多选拖放).

到目前为止,我已经合并的部分只是元素.selected上的toggleClass <li>,也<li>为选择a时添加了边框,以及helper选项.

这确实使它部分工作,但不完全.也就是说,拖动多个元素表明它确实在拖动中带来了所有选定的元素.

但是,仍然只丢弃/接收其中一个元素.我无法让它实际移动/删除拖动中的所有元素.

I hope this helps, so that someone better than me at jQuery could figure out how to make the drag and drop of multiple elements work in this nestedSortable plugin.

For clarity, here is the code from jsfiddle #2 (my own attempt):

HTML:

<body>
    <header>
        <h1>nestedSortable jQuery Plugin</h1>

        <h2>2.0</h2>
    </header>

    <section>
        <p>This is the demo page for the nestedSortable jQuery plugin.</p>

        <p><strong>Follow the development, read the docs and download the
        latest version directly from the <a href="https://github.com/ilikenwf/nestedSortable">GitHub
        page</a>.</strong></p>
    </section><!-- END section -->

    <section id="demo">
        <ol class="sortable ui-sortable mjs-nestedSortable-branch mjs-nestedSortable-expanded">
           <li style="display: list-item;" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded" id="menuItem_2">
           <div class="menuDiv">
               <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
               <span></span>
               </span>
               <span title="Click to show/hide item editor" data-id="2" class="expandEditor ui-icon ui-icon-triangle-1-n">
               <span></span>
               </span>
               <span>
               <span data-id="2" class="itemTitle">a</span>
               <span title="Click to delete item." data-id="2" class="deleteMenu ui-icon ui-icon-closethick">
               <span></span>
               </span>
               </span>
               <div id="menuEdit2" class="menuEdit hidden">
                   <p>
                       Content or form, or nothing here. Whatever you want.
                   </p>
               </div>
           </div>
           <ol>
               <li style="display: list-item;" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded" id="menuItem_4">
               <div class="menuDiv">
                   <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
                   <span></span>
                   </span>
                   <span title="Click to show/hide item editor" data-id="4" class="expandEditor ui-icon ui-icon-triangle-1-n">
                   <span></span>
                   </span>
                   <span>
                   <span data-id="4" class="itemTitle">c</span>
                   <span title="Click to delete item." data-id="4" class="deleteMenu ui-icon ui-icon-closethick">
                   <span></span>
                   </span>
                   </span>
                   <div id="menuEdit4" class="menuEdit hidden">
                       <p>
                           Content or form, or nothing here. Whatever you want.
                       </p>
                   </div>
               </div>
               <ol>
                   <li class="mjs-nestedSortable-leaf" id="menuItem_6">
                   <div class="menuDiv">
                       <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
                       <span></span>
                       </span>
                       <span title="Click to show/hide item editor" data-id="6" class="expandEditor ui-icon ui-icon-triangle-1-n">
                       <span></span>
                       </span>
                       <span>
                       <span data-id="6" class="itemTitle">e</span>
                       <span title="Click to delete item." data-id="6" class="deleteMenu ui-icon ui-icon-closethick">
                       <span></span>
                       </span>
                       </span>
                       <div id="menuEdit6" class="menuEdit hidden">
                           <p>
                               Content or form, or nothing here. Whatever you want.
                           </p>
                       </div>
                   </div>
                   </li>
               </ol>
               </li>
               <li style="display: list-item;" class="mjs-nestedSortable-leaf" id="menuItem_5">
               <div class="menuDiv">
                   <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
                   <span></span>
                   </span>
                   <span title="Click to show/hide item editor" data-id="5" class="expandEditor ui-icon ui-icon-triangle-1-n">
                   <span></span>
                   </span>
                   <span>
                   <span data-id="5" class="itemTitle">d</span>
                   <span title="Click to delete item." data-id="5" class="deleteMenu ui-icon ui-icon-closethick">
                   <span></span>
                   </span>
                   </span>
                   <div id="menuEdit5" class="menuEdit hidden">
                       <p>
                           Content or form, or nothing here. Whatever you want.
                       </p>
                   </div>
               </div>
               </li>
           </ol>
           </li>
           <ol>
           </ol>
           <li style="display: list-item;" class="mjs-nestedSortable-leaf" id="menuItem_7">
           <div class="menuDiv">
               <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
               <span></span>
               </span>
               <span title="Click to show/hide item editor" data-id="7" class="expandEditor ui-icon ui-icon-triangle-1-n">
               <span></span>
               </span>
               <span>
               <span data-id="7" class="itemTitle">f</span>
               <span title="Click to delete item." data-id="7" class="deleteMenu ui-icon ui-icon-closethick">
               <span></span>
               </span>
               </span>
               <div id="menuEdit7" class="menuEdit hidden">
                   <p>
                      Content or form, or nothing here. Whatever you want.
                   </p>
               </div>
           </div>
           </li>
           <li class="mjs-nestedSortable-leaf" id="menuItem_3">
           <div class="menuDiv">
               <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
               <span></span>
               </span>
               <span title="Click to show/hide item editor" data-id="3" class="expandEditor ui-icon ui-icon-triangle-1-n">
               <span></span>
               </span>
               <span>
               <span data-id="3" class="itemTitle">b</span>
               <span title="Click to delete item." data-id="3" class="deleteMenu ui-icon ui-icon-closethick">
               <span></span>
               </span>
               </span>
               <div id="menuEdit3" class="menuEdit hidden">
                   <p>
                       Content or form, or nothing here. Whatever you want.
                   </p>
               </div>
           </div>
           </li>
       </ol>

        <h3>Try the custom methods:</h3>

        <p><br>
        <input id="serialize" name="serialize" type="submit" value=
        "Serialize"></p>
        <pre id="serializeOutput">
        </pre>

        <p><input id="toArray" name="toArray" type="submit" value=
        "To array"></p>
        <pre id="toArrayOutput">
        </pre>

        <p><input id="toHierarchy" name="toHierarchy" type="submit" value=
        "To hierarchy"></p>
        <pre id="toHierarchyOutput">
        </pre>

        <p><em>Note: This demo has the <code>maxLevels</code> option set to '4'.</em></p>
    </section><!-- END #demo -->

    <section id="license">
        <h4>License</h4>

        <p>This work is licensed under the MIT License.<br>
        Which means you can do pretty much whatever you want with it.</p>

        <p>&copy; 2010&dash;2014 Manuele J Sarfatti</p>
    </section><!-- END #documentation -->
</body>
Run Code Online (Sandbox Code Playgroud)

JS:

$().ready(function(){
            $('li.mjs-nestedSortable-leaf').on('click', function () {               
                $(this).toggleClass('selected');
            });
            var ns = $('ol.sortable').nestedSortable({
                forcePlaceholderSize: true,
                handle: 'div',
                helper: function (e, item) {
                    console.log('parent-helper');
                    console.log(item);
                    if(!item.hasClass('selected'))
                       item.addClass('selected');
                    var elements = $('.selected').not('.ui-sortable-placeholder').clone();
                    var helper = $('<ul/>');
                    item.siblings('.selected').addClass('hidden');
                    return helper.append(elements);
                    },
                start: function (e, ui) {
                    var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
                    ui.item.data('items', elements);
                },
                receive: function (e, ui) {
                    ui.item.before(ui.item.data('items'));
                },
                stop: function (e, ui) {
                    ui.item.siblings('.selected').removeClass('hidden');
                    $('.selected').removeClass('selected');
                },                  
                items: 'li',
                opacity: .6,
                placeholder: 'placeholder',
                revert: 250,
                tabSize: 25,
                tolerance: 'pointer',
                toleranceElement: '> div',
                maxLevels: 4,
                isTree: true,
                expandOnHover: 700,
                startCollapsed: false,
                change: function(){
                    console.log('Relocated item');
                }
            });

            $('.expandEditor').attr('title','Click to show/hide item editor');
            $('.disclose').attr('title','Click to show/hide children');
            $('.deleteMenu').attr('title', 'Click to delete item.');

            $('.disclose').on('click', function() {
                $(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
                $(this).toggleClass('ui-icon-plusthick').toggleClass('ui-icon-minusthick');
            });

            $('.expandEditor, .itemTitle').click(function(){
                var id = $(this).attr('data-id');
                $('#menuEdit'+id).toggle();
                $(this).toggleClass('ui-icon-triangle-1-n').toggleClass('ui-icon-triangle-1-s');
            });

            $('.deleteMenu').click(function(){
                var id = $(this).attr('data-id');
                $('#menuItem_'+id).remove();
            });

            $('#serialize').click(function(){
                serialized = $('ol.sortable').nestedSortable('serialize');
                $('#serializeOutput').text(serialized+'\n\n');
            })

            $('#toHierarchy').click(function(e){
                hiered = $('ol.sortable').nestedSortable('toHierarchy', {startDepthCount: 0});
                hiered = dump(hiered);
                (typeof($('#toHierarchyOutput')[0].textContent) != 'undefined') ?
                $('#toHierarchyOutput')[0].textContent = hiered : $('#toHierarchyOutput')[0].innerText = hiered;
            })

            $('#toArray').click(function(e){
                arraied = $('ol.sortable').nestedSortable('toArray', {startDepthCount: 0});
                arraied = dump(arraied);
                (typeof($('#toArrayOutput')[0].textContent) != 'undefined') ?
                $('#toArrayOutput')[0].textContent = arraied : $('#toArrayOutput')[0].innerText = arraied;
            });
        });         

        function dump(arr,level) {
            var dumped_text = "";
            if(!level) level = 0;

            //The padding given at the beginning of the line.
            var level_padding = "";
            for(var j=0;j<level+1;j++) level_padding += "    ";

            if(typeof(arr) == 'object') { //Array/Hashes/Objects
                for(var item in arr) {
                    var value = arr[item];

                    if(typeof(value) == 'object') { //If it is an array,
                        dumped_text += level_padding + "'" + item + "' ...\n";
                        dumped_text += dump(value,level+1);
                    } else {
                        dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
                    }
                }
            } else { //Strings/Chars/Numbers etc.
                dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
            }
            return dumped_text;
        }
Run Code Online (Sandbox Code Playgroud)

CSS:

html {
            background-color: #eee;
        }

        body {
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            color: #444;
            background-color: #fff;
            font-size: 13px;
            font-family: Freesans, sans-serif;
            padding: 2em 4em;
            width: 860px;
            margin: 15px auto;
            box-shadow: 1px 1px 8px #444;
            -mox-box-shadow: 1px 1px 8px #444;
            -webkit-box-shadow: 1px -1px 8px #444;
        }

        a,a:visited {
            color: #4183C4;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        pre,code {
            font-size: 12px;
        }

        pre {
            width: 100%;
            overflow: auto;
        }

        small {
            font-size: 90%;
        }

        small code {
            font-size: 11px;
        }

        .placeholder {
            outline: 1px dashed #4183C4;
        }

        .mjs-nestedSortable-error {
            background: #fbe3e4;
            border-color: transparent;
        }

        #tree {
            width: 550px;
            margin: 0;
        }

        ol {
            max-width: 450px;
            padding-left: 25px;
        }

        ol.sortable,ol.sortable ol {
            list-style-type: none;
        }

        .sortable li div {
            border: 1px solid #d4d4d4;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            cursor: move;
            border-color: #D4D4D4 #D4D4D4 #BCBCBC;
            margin: 0;
            padding: 3px;
        }

        li.mjs-nestedSortable-collapsed.mjs-nestedSortable-hovering div {
            border-color: #999;
        }

        .disclose, .expandEditor {
            cursor: pointer;
            width: 20px;
            display: none;
        }

        .sortable li.mjs-nestedSortable-collapsed > ol {
            display: none;
        }

        .sortable li.mjs-nestedSortable-branch > div > .disclose {
            display: inline-block;
        }

        .sortable span.ui-icon {
            display: inline-block;
            margin: 0;
            padding: 0;
        }

        .menuDiv {
            background: #EBEBEB;
        }

        .menuEdit {
            background: #FFF;
        }

        .itemTitle {
            vertical-align: middle;
            cursor: pointer;
        }

        .deleteMenu {
            float: right;
            cursor: pointer;
        }

        h1 {
            font-size: 2em;
            margin-bottom: 0;
        }

        h2 {
            font-size: 1.2em;
            font-weight: 400;
            font-style: italic;
            margin-top: .2em;
            margin-bottom: 1.5em;
        }

        h3 {
            font-size: 1em;
            margin: 1em 0 .3em;
        }

        p,ol,ul,pre,form {
            margin-top: 0;
            margin-bottom: 1em;
        }

        dl {
            margin: 0;
        }

        dd {
            margin: 0;
            padding: 0 0 0 1.5em;
        }

        code {
            background: #e5e5e5;
        }

        input {
            vertical-align: text-bottom;
        }

        .notice {
            color: #c33;
        }

        .selected { 
            border: solid #000 1px;
        }
Run Code Online (Sandbox Code Playgroud)

Shi*_*tel 5

这可能对你有帮助.如果你想看到Fiddle nestedSortable工作拖动(多个选中和猥亵的孩子)并插入到开箱即用.

$().ready(function() {
  $('li').on('click', function(e) {
    e.stopPropagation();
    $(this).toggleClass('selected');
  });
  var ns = $('ol.sortable, ol.moved').nestedSortable({

    connectWith: 'ol.moved, ol.sortable',

    forcePlaceholderSize: true,
    handle: 'div',
    helper: function(e, item) {
      console.log('parent-helper');
      console.log(item);
      if (!item.hasClass('selected'))
        item.addClass('selected');
      var elements = $('.selected').not('.ui-sortable-placeholder').clone();
      var helper = $('<ul/>');
      item.siblings('.selected').addClass('hidden');
      return helper.append(elements);
    },
    start: function(e, ui) {
      var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
      ui.item.data('items', elements);
    },
    receive: function(e, ui) {
      ui.item.before(ui.item.data('items'));
    },
    stop: function(e, ui) {
      ui.item.siblings('.selected').removeClass('hidden');
      $('.selected').removeClass('selected');
    },
    items: 'li',
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    maxLevels: 4,
    isTree: true,
    expandOnHover: 700,
    startCollapsed: false,
    change: function() {
      console.log('Relocated item');
    }
  });

  $('.expandEditor').attr('title', 'Click to show/hide item editor');
  $('.disclose').attr('title', 'Click to show/hide children');
  $('.deleteMenu').attr('title', 'Click to delete item.');

  $('.disclose').on('click', function() {
    $(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
    $(this).toggleClass('ui-icon-plusthick').toggleClass('ui-icon-minusthick');
  });

  $('.expandEditor, .itemTitle').click(function() {
    var id = $(this).attr('data-id');
    $('#menuEdit' + id).toggle();
    $(this).toggleClass('ui-icon-triangle-1-n').toggleClass('ui-icon-triangle-1-s');
  });

  $('.deleteMenu').click(function() {
    var id = $(this).attr('data-id');
    $('#menuItem_' + id).remove();
  });

  $('#serialize').click(function() {
    serialized = $('ol.moved').nestedSortable('serialize');
    $('#serializeOutput').text(serialized + '\n\n');
  })

  $('#toHierarchy').click(function(e) {
    hiered = $('ol.moved').nestedSortable('toHierarchy', {
      startDepthCount: 0
    });
    hiered = dump(hiered);
    (typeof($('#toHierarchyOutput')[0].textContent) != 'undefined') ?
    $('#toHierarchyOutput')[0].textContent = hiered: $('#toHierarchyOutput')[0].innerText = hiered;
  })

  $('#toArray').click(function(e) {
    arraied = $('ol.moved').nestedSortable('toArray', {
      startDepthCount: 0
    });
    arraied = dump(arraied);
    (typeof($('#toArrayOutput')[0].textContent) != 'undefined') ?
    $('#toArrayOutput')[0].textContent = arraied: $('#toArrayOutput')[0].innerText = arraied;
  });
});

function dump(arr, level) {
  var dumped_text = "";
  if (!level) level = 0;

  //The padding given at the beginning of the line.
  var level_padding = "";
  for (var j = 0; j < level + 1; j++) level_padding += "    ";

  if (typeof(arr) == 'object') { //Array/Hashes/Objects
    for (var item in arr) {
      var value = arr[item];

      if (typeof(value) == 'object') { //If it is an array,
        dumped_text += level_padding + "'" + item + "' ...\n";
        dumped_text += dump(value, level + 1);
      } else {
        dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
      }
    }
  } else { //Strings/Chars/Numbers etc.
    dumped_text = "===>" + arr + "<===(" + typeof(arr) + ")";
  }
  return dumped_text;
}
Run Code Online (Sandbox Code Playgroud) 
html {
  background-color: #eee;
}
body {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #444;
  background-color: #fff;
  font-size: 13px;
  font-family: Freesans, sans-serif;
  padding: 2em 4em;
  width: 860px;
  margin: 15px auto;
  box-shadow: 1px 1px 8px #444;
  -mox-box-shadow: 1px 1px 8px #444;
  -webkit-box-shadow: 1px -1px 8px #444;
}
a,
a:visited {
  color: #4183C4;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
pre,
code {
  font-size: 12px;
}
pre {
  width: 100%;
  overflow: auto;
}
small {
  font-size: 90%;
}
small code {
  font-size: 11px;
}
.placeholder {
  outline: 1px dashed #4183C4;
}
.mjs-nestedSortable-error {
  background: #fbe3e4;
  border-color: transparent;
}
#tree {
  width: 550px;
  margin: 0;
}
ol {
  max-width: 450px;
  padding-left: 25px;
}
ol.moved,
ol.moved ol,
ol.sortable,
ol.sortable ol {
  list-style-type: none;
}
.moved li div,
.sortable li div {
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  cursor: move;
  border-color: #D4D4D4 #D4D4D4 #BCBCBC;
  margin: 0;
  padding: 3px;
}
li.mjs-nestedSortable-collapsed.mjs-nestedSortable-hovering div {
  border-color: #999;
}
.disclose,
.expandEditor {
  cursor: pointer;
  width: 20px;
  display: none;
}
.moved li.mjs-nestedSortable-collapsed > ol,
.sortable li.mjs-nestedSortable-collapsed > ol {
  display: none;
}
.moved li.mjs-nestedSortable-branch > div > .disclose,
.sortable li.mjs-nestedSortable-branch > div > .disclose {
  display: inline-block;
}
.moved span.ui-icon,
.sortable span.ui-icon {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.menuDiv {
  background: #EBEBEB;
}
.menuEdit {
  background: #FFF;
}
.itemTitle {
  vertical-align: middle;
  cursor: pointer;
}
.deleteMenu {
  float: right;
  cursor: pointer;
}
h1 {
  font-size: 2em;
  margin-bottom: 0;
}
h2 {
  font-size: 1.2em;
  font-weight: 400;
  font-style: italic;
  margin-top: .2em;
  margin-bottom: 1.5em;
}
h3 {
  font-size: 1em;
  margin: 1em 0 .3em;
}
p,
ol,
ul,
pre,
form {
  margin-top: 0;
  margin-bottom: 1em;
}
dl {
  margin: 0;
}
dd {
  margin: 0;
  padding: 0 0 0 1.5em;
}
code {
  background: #e5e5e5;
}
input {
  vertical-align: text-bottom;
}
.notice {
  color: #c33;
}
.selected {
  border: solid #000 1px;
}
ol.sortable,
ol.moved {
  height: 500px;
  float: left;
  width: 46.5%;
}
.selected.hidden {
  display: none !important;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ilikenwf.github.io/jquery.mjs.nestedSortable.js"></script>
<header>
  <h1>nestedSortable jQuery Plugin</h1>

  <h2>2.0</h2>
</header>

<section>
  <p>This is the demo page for the nestedSortable jQuery plugin.</p>

  <p><strong>Follow the development, read the docs and download the
        latest version directly from the <a href="https://github.com/ilikenwf/nestedSortable">GitHub
        page</a>.</strong>
  </p>
</section>
<!-- END section -->

<section id="demo">
  <ol class="sortable ui-sortable mjs-nestedSortable-branch mjs-nestedSortable-expanded">

    <li style="display: list-item;" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded" id="menuItem_2">
      <div class="menuDiv">
        <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
               <span></span>
        </span>
        <span title="Click to show/hide item editor" data-id="2" class="expandEditor ui-icon ui-icon-triangle-1-n">
               <span></span>
        </span>
        <span>
               <span data-id="2" class="itemTitle">a</span>
        <span title="Click to delete item." data-id="2" class="deleteMenu ui-icon ui-icon-closethick">
               <span></span>
        </span>
        </span>
        <div id="menuEdit2" class="menuEdit hidden">
          <p>
            Content or form, or nothing here. Whatever you want.
          </p>
        </div>
      </div>
      <ol>
        <li style="display: list-item;" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded" id="menuItem_4">
          <div class="menuDiv">
            <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
                   <span></span>
            </span>
            <span title="Click to show/hide item editor" data-id="4" class="expandEditor ui-icon ui-icon-triangle-1-n">
                   <span></span>
            </span>
            <span>
                   <span data-id="4" class="itemTitle">c</span>
            <span title="Click to delete item." data-id="4" class="deleteMenu ui-icon ui-icon-closethick">
                   <span></span>
            </span>
            </span>
            <div id="menuEdit4" class="menuEdit hidden">
              <p>
                Content or form, or nothing here. Whatever you want.
              </p>
            </div>
          </div>
          <ol>
            <li class="mjs-nestedSortable-leaf" id="menuItem_6">
              <div class="menuDiv">
                <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
                       <span></span>
                </span>
                <span title="Click to show/hide item editor" data-id="6" class="expandEditor ui-icon ui-icon-triangle-1-n">
                       <span></span>
                </span>
                <span>
                       <span data-id="6" class="itemTitle">e</span>
                <span title="Click to delete item." data-id="6" class="deleteMenu ui-icon ui-icon-closethick">
                       <span></span>
                </span>
                </span>
                <div id="menuEdit6" class="menuEdit hidden">
                  <p>
                    Content or form, or nothing here. Whatever you want.
                  </p>
                </div>
              </div>
            </li>
          </ol>
        </li>
        <li style="display: list-item;" class="mjs-nestedSortable-leaf" id="menuItem_5">
          <div class="menuDiv">
            <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
                   <span></span>
            </span>
            <span title="Click to show/hide item editor" data-id="5" class="expandEditor ui-icon ui-icon-triangle-1-n">
                   <span></span>
            </span>
            <span>
                   <span data-id="5" class="itemTitle">d</span>
            <span title="Click to delete item." data-id="5" class="deleteMenu ui-icon ui-icon-closethick">
                   <span></span>
            </span>
            </span>
            <div id="menuEdit5" class="menuEdit hidden">
              <p>
                Content or form, or nothing here. Whatever you want.
              </p>
            </div>
          </div>
        </li>
      </ol>
    </li>
    <ol>
    </ol>
    <li style="display: list-item;" class="mjs-nestedSortable-leaf" id="menuItem_7">
      <div class="menuDiv">
        <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
               <span></span>
        </span>
        <span title="Click to show/hide item editor" data-id="7" class="expandEditor ui-icon ui-icon-triangle-1-n">
               <span></span>
        </span>
        <span>
               <span data-id="7" class="itemTitle">f</span>
        <span title="Click to delete item." data-id="7" class="deleteMenu ui-icon ui-icon-closethick">
               <span></span>
        </span>
        </span>
        <div id="menuEdit7" class="menuEdit hidden">
          <p>
            Content or form, or nothing here. Whatever you want.
          </p>
        </div>
      </div>
    </li>
    <li class="mjs-nestedSortable-leaf" id="menuItem_3">
      <div class="menuDiv">
        <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
               <span></span>
        </span>
        <span title="Click to show/hide item editor" data-id="3" class="expandEditor ui-icon ui-icon-triangle-1-n">
               <span></span>
        </span>
        <span>
               <span data-id="3" class="itemTitle">b</span>
        <span title="Click to delete item." data-id="3" class="deleteMenu ui-icon ui-icon-closethick">
               <span></span>
        </span>
        </span>
        <div id="menuEdit3" class="menuEdit hidden">
          <p>
            Content or form, or nothing here. Whatever you want.
          </p>
        </div>
      </div>
    </li>
  </ol>

  <ol class="moved ui-sortable mjs-nestedSortable-branch mjs-nestedSortable-expanded" style="border: 1px red solid; min-height:100px;">

  </ol>




  <h3>Try the custom methods:</h3>

  <p>
    <br>
    <input id="serialize" name="serialize" type="submit" value="Serialize">
  </p>
  <pre id="serializeOutput">
        </pre>

  <p>
    <input id="toArray" name="toArray" type="submit" value="To array">
  </p>
  <pre id="toArrayOutput">
        </pre>

  <p>
    <input id="toHierarchy" name="toHierarchy" type="submit" value="To hierarchy">
  </p>
  <pre id="toHierarchyOutput">
        </pre>

  <p><em>Note: This demo has the <code>maxLevels</code> option set to '4'.</em>
  </p>
</section>
<!-- END #demo -->

<section id="license">
  <h4>License</h4>

  <p>This work is licensed under the MIT License.
    <br>Which means you can do pretty much whatever you want with it.</p>

  <p>&copy; 2010&dash;2014 Manuele J Sarfatti</p>
</section>
<!-- END #documentation -->
Run Code Online (Sandbox Code Playgroud)

如果你想看小提琴

  • @AndersSvensson你需要使用拖放 (2认同)

归档时间：

查看次数：

3316 次

最近记录：

11 年 前
如何使用JavaScript或jQuery一次拖动多个元素？ 23
更多相关链接
相关归档
最后一段网址 213
jQuery - 检查输入是否不是选择字段 39
在jQuery中获得下一个兄弟的最干净的方法 37
直接后代只有jQuery的find() 34
slideToggle在表格行中 30
我可以将数据添加到已经序列化的数组中吗？ 18
jQuery模式对话框按钮文本 8
jquery中的浮动菜单工具栏 5
如何管理空的jQuery手风琴面板？如何禁用点击手风琴标题？ 3
选择器中的JQuery"OR"？ 2
难疑归档
如何重命名本地Git分支？ 8033
如果__name__ =="__ main__":怎么办？ 5545
适用于Android UserManager.isUserAGoat()的用例？ 3506
C#的正确版本号是多少？ 2422
.NET中的decimal,float和double之间的区别？ 2015
如何在Vim中进行不区分大小写的搜索 1579
如何递归计算目录中的所有代码行？ 1536
JavaScript发布请求,如表单提交 1465
短路Array.forEach就像调用break 1429
按ID删除元素 1085