@@ -1,4 +1,32 @@ +var MultidragObserver = Class.create({ + initialize: function(element) { + this.element = element; + }, + + onStart: function(eventName, draggable, domEvent) { + draggable.element.addClassName('activated'); + draggable._clone.addClassName('activated'); + activated = getActivatedElementIds(); + info = new Element('div', { 'class': 'dragcount' }); + info.insert(activated.length); + draggable.element.appendChild(info); + }, + + onEnd: function(eventName, draggable, domEvent) { + $$('.dragcount').each(function(e) { e.remove() }); + parentNode = draggable.element.parentNode; + $$('.activated').each(function(e) { + if (draggable.element.id == e.id) { return; } + parentNode.insertBefore(e, draggable.element); + }); + } + +}); + + + Event.observe(window, 'load', function() { + // create the scripty sortable Sortable.create('content', { tag: 'div', overlap: 'horizontal', @@ -7,13 +35,42 @@ Event.observe(window, 'load', function() { reverteffect: dragRevertEffect, constraint: false }); + // create a drop zone outside the sortable Droppables.add('target', { + onHover: function(draggable, droppable, percetage) { + Sortable.unmark(); + Sortable._marker = null; + }, onDrop: function(element) { - $('messages').insert({'top': 'Dropped '+element.id+'\n'}); + activated = getActivatedElementIds(); + $('target').insert({'top': 'Dropped '+activated.sort().join(', ')+'\n'}); } }); + // register our multidrag listener + Draggables.addObserver(new MultidragObserver($('content'))); + + // register additional behaviour on the sortables draggables + Sortable.sortables.content.draggables.each(function(draggable) { + draggable.element.observe('mousedown', function() { + draggable.element.toggleClassName('activated'); + }); + }); }); +// returns an array of elements that are in state activated. the element you +// pass as parameter is returned in any case. +function getActivatedElementIds() { + activated = [].concat($$('.activated')); + activated = activated.pluck('id').uniq(); + return activated; +} + + +// deactivates the sortable if more than one elements are activated +function updateSortableBehaviour() { + +} + // the effect to apply when drag revert happens function dragRevertEffect(element, top_offset, left_offset) { // a scripty Effect.Move used to do do not animate the revert of Draggables custom.js @@ -407,6 +407,15 @@ var Draggable = Class.create({ if(this.options.ghosting) { if (!this.element._originallyAbsolute) Position.relativize(this.element); + + // PATCH BEGIN + // Trigger quasi revert behaviour when Sortable._marker is null: + // This is a signal we send ourself from onDrop that the draggable should + // remain on its original position + if (null == Sortable._marker) { + this.element.parentNode.insertBefore(this.element, this._clone); + } + // PATCH END delete this.element._originallyAbsolute; Element.remove(this._clone); this._clone = null; dragdrop.js @@ -67,10 +67,9 @@ width: 100%; height: 400px; border: 2px dotted black; - } - #messages { font-style: fixed; white-space: pre; + padding: 2px; } .dropmarker { margin-top: 5px; @@ -78,6 +77,23 @@ width: 2px; background-color: red; } + .activated { + background-color: yellow; + } + .dragcount { + z-index: 1001; + font-size: 12px; + border: 2px solid red; + width: 20px; + height: 20px; + text-align: center; + line-height: 20px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + position: relative; + left: 73px; + top: 25px;; + } </style> <script type="text/javascript" src="prototype.js"></script> @@ -90,7 +106,6 @@ <div id="sidebar"> <h3>Drop target area</h3> <div id='target'></div> - <div id='messages'></div> </div> index.html b8410f94522064330c966106fdae42eb2ca1c79c beat beat@simplificator.com http://github.com/panter/scriptaculous-multidrag/commit/375aaab9f72b4af0d9ad1c9d4ff7cd9e08109942 375aaab9f72b4af0d9ad1c9d4ff7cd9e08109942 2008-10-20T07:14:31-07:00 2008-10-20T07:14:31-07:00 supported multiple element d&d and sorting 4293f0767bfdc3efbb4b1aa5602b62c62af22cc1 beat beat@simplificator.com