Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="demo">
- <p>Available Boxes (click to select multiple boxes)</p>
- <ul id="draggable">
- <li>Box #1</li>
- <li>Box #2</li>
- <li>Box #3</li>
- <li>Box #4</li>
- </ul>
- <p>My Boxes</p>
- <ul id="droppable">
- </ul>
- </div>
- $(document).ready(function(){
- var selectedClass = 'ui-state-highlight',
- clickDelay = 600, // click time (milliseconds)
- lastClick, diffClick; // timestamps
- $("#draggable li")
- // Script to deferentiate a click from a mousedown for drag event
- .bind('mousedown mouseup', function(e){
- if (e.type=="mousedown") {
- lastClick = e.timeStamp; // get mousedown time
- } else {
- diffClick = e.timeStamp - lastClick;
- if ( diffClick < clickDelay ) {
- // add selected class to group draggable objects
- $(this).toggleClass(selectedClass);
- }
- }
- })
- .draggable({
- revertDuration: 10, // grouped items animate separately, so leave this number low
- containment: '.demo',
- start: function(e, ui) {
- ui.helper.addClass(selectedClass);
- },
- stop: function(e, ui) {
- // reset group positions
- $('.' + selectedClass).css({ top:0, left:0 });
- },
- drag: function(e, ui) {
- // set selected group position to main dragged object
- // this works because the position is relative to the starting position
- $('.' + selectedClass).css({
- top : ui.position.top,
- left: ui.position.left
- });
- }
- });
- $("#droppable, #draggable")
- .sortable()
- .droppable({
- drop: function(e, ui) {
- $('.' + selectedClass)
- .appendTo($(this))
- .add(ui.draggable) // ui.draggable is appended by the script, so add it after
- .removeClass(selectedClass)
- .css({ top:0, left:0 });
- }
- });
- });
- <ul>
- <li>One</li>
- <li>Two</li>
- <li>Three</li>
- </ul>
- <ul>
- <li>Four</li>
- <li>Five</li>
- <li>Six</li>
- </ul>
- $("ul").on('click', 'li', function (e) {
- if (e.ctrlKey || e.metaKey) {
- $(this).toggleClass("selected");
- } else {
- $(this).addClass("selected").siblings().removeClass('selected');
- }
- }).sortable({
- connectWith: "ul",
- delay: 150, //Needed to prevent accidental drag when trying to select
- revert: 0,
- helper: function (e, item) {
- var helper = $('<li/>');
- if (!item.hasClass('selected')) {
- item.addClass('selected').siblings().removeClass('selected');
- }
- var elements = item.parent().children('.selected').clone();
- item.data('multidrag', elements).siblings('.selected').remove();
- return helper.append(elements);
- },
- stop: function (e, info) {
- info.item.after(info.item.data('multidrag')).remove();
- }
- });
- <style>
- ul {border:1px solid Black;width:200px;height:200px;display:inline-block;vertical-align:top}
- li {background-color:Azure;border-bottom:1px dotted Gray}
- li.selected {background-color:GoldenRod}
- </style>
- <h1>Click items to select them</h1>
- <ul>
- <li>One</li>
- <li>Two<li>
- <li>Three</li>
- </ul><ul>
- <li>Four</li>
- <li>Five<li>
- <li>Six</li>
- </ul>
- <script>
- $("li").click(function(){
- $(this).toggleClass("selected");
- })
- $("ul").sortable({
- connectWith: "ul",
- start:function(e,info){
- // info.item.siblings(".selected").appendTo(info.item);
- info.item.siblings(".selected").not(".ui-sortable-placeholder").appendTo(info.item);
- },
- stop:function(e,info){
- info.item.after(info.item.find("li"))
- }
- })
- </script>
- $('ul.sortable').multisortable();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement