/** * Multi-Select And Drag * * Not elegant solution to this problem, but the problem, despite being easily * desribed is not simple. This code is more a proof of concept, but should be * extendable by anyone with the time / inclination, there I grant permission * for it to be re-used in accodance with the MIT license: * * Copyright (c) 2009 Chris Walker (http://thechriswalker.net/) * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */(function($){ $.fn.drag_drop_selectable = function( options ){ $.fn.captureKeys(); var $_this = this; var settings = $.extend({},$.fn.drag_drop_selectable.defaults,options||{}); return $(this).each(function(i){ var $list = $(this); var list_id = $.fn.drag_drop_selectable.unique++; $.fn.drag_drop_selectable.stack[list_id]={"selected":[ ],"all":[ ]};//we hold all as well as selected so we can invert and stuff... $list.attr('dds',list_id); $.fn.drag_drop_selectable.settings[list_id] = settings; $list.find('li') //make all list elements selectable with click and ctrl+click. .each(function(){ var $item = $(this); //add item to list! var item_id = $.fn.drag_drop_selectable.unique++; $item.attr('dds',item_id); $.fn.drag_drop_selectable.stack[list_id].all.push(item_id); $(this).bind('click.dds_select',function(e){ if($.fn.isPressed(CTRL_KEY) || ($.fn.drag_drop_selectable.stack[$.fn.drag_drop_selectable.getListId( $(this).attr('dds') )].selected.length == 1 && $(this).hasClass('dds_selected'))){ //ctrl pressed add to selection $.fn.drag_drop_selectable.toggle(item_id); }else{ //ctrl not pressed make new selection $.fn.drag_drop_selectable.replace(item_id); } }).bind('dds.select',function(){ $(this).addClass('dds_selected').addClass( $.fn.drag_drop_selectable.settings[$.fn.drag_drop_selectable.getListId($(this).attr('dds'))].selectClass );

}).bind('dds.deselect',function(){ $(this).removeClass('dds_selected').removeClass( $.fn.drag_drop_selectable.settings[$.fn.drag_drop_selectable.getListId($(this).attr('dds'))].selectClass );; }).css({cursor:'pointer'}); }) //OK so they are selectable. now I need to make them draggable, in such a way that they pick up their friends when dragged. hmmm how do I do that? .draggable({ helper:function(){ $clicked = $(this); if( ! $clicked.hasClass('dds_selected') ){ //trigger the click function. $clicked.trigger('click.dds_select'); } var list = $.fn.drag_drop_selectable.getListId($clicked.attr('dds')); var $helper = $('