summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authormleibman <michael.leibman@gmail.com>2010-09-09 12:49:38 -0700
committermleibman <michael.leibman@gmail.com>2010-09-09 12:49:38 -0700
commite768e395293da000c5d0e70e29bac3b458471eac (patch)
tree45d8a586dd147edd76822c3de2da95dcfe77d109
parent978441963e9748050e55920767051911925ffc1f (diff)
downloadSlickGrid-e768e395293da000c5d0e70e29bac3b458471eac.zip
SlickGrid-e768e395293da000c5d0e70e29bac3b458471eac.tar.gz
SlickGrid-e768e395293da000c5d0e70e29bac3b458471eac.tar.bz2
- CHANGED: removed unused files and added jquery.event.drop-2.9.min.js
- ADDED: new grid method "getCellFromEvent" - ADDED: drag'n'drop example to "example9-row-reordering.html"
Diffstat
-rw-r--r--examples/example9-row-reordering.html150
-rw-r--r--lib/jquery.event.drag.custom.js142
-rw-r--r--lib/jquery.event.drop-2.0.min.js6
-rw-r--r--slick.grid.js12
4 files changed, 140 insertions, 170 deletions
diff --git a/examples/example9-row-reordering.html b/examples/example9-row-reordering.html
index b2e3ac4..827015d 100644
--- a/examples/example9-row-reordering.html
+++ b/examples/example9-row-reordering.html
@@ -17,6 +17,18 @@
cursor: move;
background: url("../images/drag-handle.png") no-repeat center center;
}
+
+ .recycle-bin {
+ width: 120px;
+ border: 1px solid gray;
+ background: beige;
+ padding: 4px;
+ font-size: 12pt;
+ font-weight: bold;
+ color: black;
+ text-align: center;
+ -moz-border-radius: 10px;
+ }
</style>
</head>
<body>
@@ -31,7 +43,14 @@
<hr/>
<div style="padding:6px;">
Click to select, Ctrl-click to toggle selection, Shift-click to select a range.<br/>
- Drag one or more rows to reorder.
+ Drag one or more rows by the handle to reorder.<br/>
+ Drag one or more rows to the recycle bin to delete.
+
+ <br/>
+ <br/>
+ <div id="dropzone" class="recycle-bin">
+ Recycle Bin
+ </div>
</div>
</div>
@@ -40,6 +59,7 @@
<script language="JavaScript" src="../lib/jquery-1.4.2.min.js"></script>
<script language="JavaScript" src="../lib/jquery-ui-1.8.2.custom.min.js"></script>
<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+ <script language="JavaScript" src="../lib/jquery.event.drop-2.0.min.js"></script>
<script language="JavaScript" src="../slick.editors.js"></script>
<script language="JavaScript" src="../slick.grid.js"></script>
@@ -48,32 +68,36 @@
var grid;
var data = [];
- var columns = [{
- id: "#",
- name: "",
- width: 40,
- behavior: "selectAndMove",
- unselectable: true,
- resizable: false,
- cssClass: "cell-reorder"
- }, {
- id: "name",
- name: "Name",
- field: "name",
- width: 500,
- cssClass: "cell-title",
- editor: TextCellEditor,
- validator: requiredFieldValidator
- }, {
- id: "complete",
- name: "Complete",
- width: 60,
- cssClass: "cell-effort-driven",
- field: "complete",
- cannotTriggerInsert: true,
- formatter: BoolCellFormatter,
- editor: YesNoCheckboxCellEditor
- }];
+ var columns = [
+ {
+ id: "#",
+ name: "",
+ width: 40,
+ behavior: "selectAndMove",
+ unselectable: true,
+ resizable: false,
+ cssClass: "cell-reorder dnd"
+ },
+ {
+ id: "name",
+ name: "Name",
+ field: "name",
+ width: 500,
+ cssClass: "cell-title",
+ editor: TextCellEditor,
+ validator: requiredFieldValidator
+ },
+ {
+ id: "complete",
+ name: "Complete",
+ width: 60,
+ cssClass: "cell-effort-driven",
+ field: "complete",
+ cannotTriggerInsert: true,
+ formatter: BoolCellFormatter,
+ editor: YesNoCheckboxCellEditor
+ }
+ ];
var options = {
editable: true,
@@ -107,7 +131,77 @@
grid = new Slick.Grid($("#myGrid"), data, columns, options);
- grid.onAddNewRow = function addItem(newItem,columnDef) {
+ $("#myGrid")
+ .bind("draginit", function(e,dd) {
+ var cell = grid.getCellFromEvent(e);
+ if (!cell)
+ return false;
+
+ dd.row = cell.row;
+ if (!data[dd.row])
+ return false;
+
+ if (Slick.GlobalEditorLock.isActive() && !Slick.GlobalEditorLock.cancelCurrentEdit())
+ return false;
+ })
+ .bind("dragstart", function(e,dd) {
+ var selectedRows = grid.getSelectedRows();
+
+ if (!selectedRows.length || $.inArray(dd.row,selectedRows) == -1) {
+ selectedRows = [dd.row];
+ grid.setSelectedRows(selectedRows);
+ }
+
+ dd.rows = selectedRows;
+ dd.count = selectedRows.length;
+
+ var proxy = $("<span></span>")
+ .css({
+ position: "absolute",
+ display: "inline-block",
+ padding: "4px 10px",
+ background: "#e0e0e0",
+ border: "1px solid gray",
+ "z-index": 99999,
+ "-moz-border-radius": "8px",
+ "-moz-box-shadow": "2px 2px 6px silver"
+ })
+ .text("Drag to Recycle Bin to delete " + dd.count + " selected row(s)")
+ .appendTo("body");
+
+ dd.helper = proxy;
+
+ $(dd.available).css("background","pink");
+
+ return proxy;
+ })
+ .bind("drag", function(e,dd) {
+ dd.helper.css({top: e.pageY + 5, left: e.pageX + 5});
+ })
+ .bind("dragend", function(e,dd) {
+ dd.helper.remove();
+ $(dd.available).css("background","beige");
+ });
+
+
+ $("#dropzone")
+ .bind("dropstart", function(e,dd) {
+ $(this).css("background","yellow");
+ })
+ .bind("dropend", function(e,dd) {
+ $(dd.available).css("background","pink");
+ })
+ .bind("drop", function(e,dd) {
+ var rowsToDelete = dd.rows.sort().reverse();
+ for (var i=0; i<rowsToDelete.length; i++) {
+ data.splice(rowsToDelete[i],1);
+ }
+ grid.invalidate();
+ grid.setSelectedRows([]);
+ });
+
+
+ grid.onAddNewRow = function(newItem,columnDef) {
var item = {name:"New task", complete: false};
$.extend(item,newItem);
data.push(item);
diff --git a/lib/jquery.event.drag.custom.js b/lib/jquery.event.drag.custom.js
deleted file mode 100644
index c012ae0..0000000
--- a/lib/jquery.event.drag.custom.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * @license
- * jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
- * Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
- */
-;(function($){ // secure $ jQuery alias
-/*******************************************************************************************/
-// Created: 2008-06-04 | Updated: 2009-03-24
-/*******************************************************************************************/
-// Events: drag, dragstart, dragend
-/*******************************************************************************************/
-
-// jquery method
-$.fn.drag = function( fn1, fn2, fn3 ){
- if ( fn2 ) this.bind('dragstart', fn1 ); // 2+ args
- if ( fn3 ) this.bind('dragend', fn3 ); // 3 args
- return !fn1 ? this.trigger('drag') // 0 args
- : this.bind('drag', fn2 ? fn2 : fn1 ); // 1+ args
- };
-
-// local refs
-var $event = $.event, $special = $event.special,
-
-// special event configuration
-drag = $special.drag = {
- not: ':input', // don't begin to drag on event.targets that match this selector
- distance: 0, // distance dragged before dragstart
- which: 1, // mouse button pressed to start drag sequence
- dragging: false, // hold the active target element
- setup: function( data ){
- data = $.extend({
- distance: drag.distance,
- which: drag.which,
- not: drag.not
- }, data || {});
- data.distance = squared( data.distance ); // xІ + yІ = distanceІ
- $event.add( this, "mousedown", handler, data );
- if ( this.attachEvent ) this.attachEvent("ondragstart", dontStart ); // prevent image dragging in IE...
- },
- teardown: function(){
- $event.remove( this, "mousedown", handler );
- if ( this === drag.dragging ) drag.dragging = drag.proxy = false; // deactivate element
- selectable( this, true ); // enable text selection
- if ( this.detachEvent ) this.detachEvent("ondragstart", dontStart ); // prevent image dragging in IE...
- }
- };
-
-// prevent normal event binding...
-$special.dragstart = $special.dragend = { setup:function(){}, teardown:function(){} };
-
-// handle drag-releatd DOM events
-function handler ( event ){
- var elem = this, returned, data = event.data || {};
- // mousemove or mouseup
- if ( data.elem ){
- // update event properties...
- elem = event.dragTarget = data.elem; // drag source element
- event.dragProxy = drag.proxy || elem; // proxy element or source
- event.cursorOffsetX = data.pageX - data.left; // mousedown offset
- event.cursorOffsetY = data.pageY - data.top; // mousedown offset
- event.offsetX = event.pageX - event.cursorOffsetX; // element offset
- event.offsetY = event.pageY - event.cursorOffsetY; // element offset
- }
- // mousedown, check some initial props to avoid the switch statement
- else if ( drag.dragging || ( data.which>0 && event.which!=data.which ) ||
- $( event.target ).is( data.not ) ) return;
- // handle various events
- switch ( event.type ){
- // mousedown, left click, event.target is not restricted, init dragging
- case 'mousedown':
- returned = hijack(event, "beforedragstart", elem);
- if (returned === false)
- return true;
- $.extend( data, $( elem ).offset(), {
- elem: elem, target: event.target,
- pageX: event.pageX, pageY: event.pageY
- }); // store some initial attributes
- $event.add( document, "mousemove mouseup", handler, data );
- selectable( elem, false ); // disable text selection
- drag.dragging = null; // pending state
- return false; // prevents text selection in safari
- // mousemove, check distance, start dragging
- case !drag.dragging && 'mousemove':
- if ( squared( event.pageX-data.pageX )
- + squared( event.pageY-data.pageY ) // xІ + yІ = distanceІ
- < data.distance ) break; // distance tolerance not reached
- event.target = data.target; // force target from "mousedown" event (fix distance issue)
- returned = hijack( event, "dragstart", elem ); // trigger "dragstart", return proxy element
- if ( returned !== false ){ // "dragstart" not rejected
- drag.dragging = elem; // activate element
- drag.proxy = event.dragProxy = $( returned || elem )[0]; // set proxy
- }
- // mousemove, dragging
- case 'mousemove':
- if ( drag.dragging ){
- returned = hijack( event, "drag", elem ); // trigger "drag"
- if ( $special.drop ){ // manage drop events
- $special.drop.allowed = ( returned !== false ); // prevent drop
- $special.drop.handler( event ); // "dropstart", "dropend"
- }
- if ( returned !== false ) break; // "drag" not rejected, stop
- event.type = "mouseup"; // helps "drop" handler behave
- }
- // mouseup, stop dragging
- case 'mouseup':
- if (drag.dragging === false) break;
- $event.remove( document, "mousemove mouseup", handler ); // remove page events
- if ( drag.dragging ){
- if ( $special.drop ) $special.drop.handler( event ); // "drop"
- hijack( event, "dragend", elem ); // trigger "dragend"
- }
- selectable( elem, true ); // enable text selection
- drag.dragging = drag.proxy = data.elem = false; // deactivate element
- break;
- }
- return true;
- };
-
-// set event type to custom value, and handle it
-function hijack ( event, type, elem ){
- event.type = type; // force the event type
- var result = $.event.handle.call( elem, event );
- return result===false ? false : result || event.result;
- };
-
-// return the value squared
-function squared ( value ){ return Math.pow( value, 2 ); };
-
-// suppress default dragstart IE events...
-function dontStart(){ return ( drag.dragging === false ); };
-
-// toggles text selection attributes
-function selectable ( elem, bool ){
- if ( !elem ) return; // maybe element was removed ?
- elem.unselectable = bool ? "off" : "on"; // IE
- elem.onselectstart = function(){ return bool; }; // IE
- //if ( document.selection && document.selection.empty ) document.selection.empty(); // IE
- if ( elem.style ) elem.style.MozUserSelect = bool ? "" : "none"; // FF
- };
-
-/*******************************************************************************************/
-})( jQuery ); // confine scope \ No newline at end of file
diff --git a/lib/jquery.event.drop-2.0.min.js b/lib/jquery.event.drop-2.0.min.js
new file mode 100644
index 0000000..b988575
--- /dev/null
+++ b/lib/jquery.event.drop-2.0.min.js
@@ -0,0 +1,6 @@
+/*!
+ * jquery.event.drop - v 2.0.0
+ * Copyright (c) 2010 Three Dub Media - http://threedubmedia.com
+ * Open Source MIT License - http://threedubmedia.com/code/license
+ */
+;(function(f){f.fn.drop=function(c,a,d){var g=typeof c=="string"?c:"",e=f.isFunction(c)?c:f.isFunction(a)?a:null;if(g.indexOf("drop")!==0)g="drop"+g;d=(c==e?a:d)||{};return e?this.bind(g,d,e):this.trigger(g)};f.drop=function(c){c=c||{};b.multi=c.multi===true?Infinity:c.multi===false?1:!isNaN(c.multi)?c.multi:b.multi;b.delay=c.delay||b.delay;b.tolerance=f.isFunction(c.tolerance)?c.tolerance:c.tolerance===null?null:b.tolerance;b.mode=c.mode||b.mode||"intersect"};var l=f.event,i=l.special,b=f.event.special.drop= {multi:1,delay:20,mode:"overlap",targets:[],datakey:"dropdata",livekey:"livedrop",add:function(c){var a=f.data(this,b.datakey);a.related+=1;if(!a.live&&c.selector){a.live=true;l.add(this,"dropinit."+b.livekey,b.delegate)}},remove:function(){f.data(this,b.datakey).related-=1},setup:function(){if(!f.data(this,b.datakey)){f.data(this,b.datakey,{related:0,active:[],anyactive:0,winner:0,location:{}});b.targets.push(this)}},teardown:function(){if(!f.data(this,b.datakey).related){f.removeData(this,b.datakey); l.remove(this,"dropinit",b.delegate);var c=this;b.targets=f.grep(b.targets,function(a){return a!==c})}},handler:function(c,a){var d;if(a)switch(c.type){case "mousedown":d=f(b.targets);if(typeof a.drop=="string")d=d.filter(a.drop);d.each(function(){var g=f.data(this,b.datakey);g.active=[];g.anyactive=0;g.winner=0});a.droppable=d;b.delegates=[];i.drag.hijack(c,"dropinit",a);b.delegates=f.unique(i.drag.flatten(b.delegates));break;case "mousemove":b.event=c;b.timer||b.tolerate(a);break;case "mouseup":b.timer= clearTimeout(b.timer);if(a.propagates){i.drag.hijack(c,"drop",a);i.drag.hijack(c,"dropend",a);f.each(b.delegates||[],function(){l.remove(this,"."+b.livekey)})}break}},delegate:function(c){var a=[],d,g=f.data(this,"events")||{};f.each(g.live||[],function(e,h){if(h.preType.indexOf("drop")===0){d=f(c.currentTarget).find(h.selector);d.length&&d.each(function(){l.add(this,h.origType+"."+b.livekey,h.origHandler,h.data);f.inArray(this,a)<0&&a.push(this)})}});b.delegates.push(a);return a.length?f(a):false}, locate:function(c,a){var d=f.data(c,b.datakey),g=f(c),e=g.offset()||{},h=g.outerHeight();g=g.outerWidth();e={elem:c,width:g,height:h,top:e.top,left:e.left,right:e.left+g,bottom:e.top+h};if(d){d.location=e;d.index=a;d.elem=c}return e},contains:function(c,a){return(a[0]||a.left)>=c.left&&(a[0]||a.right)<=c.right&&(a[1]||a.top)>=c.top&&(a[1]||a.bottom)<=c.bottom},modes:{intersect:function(c,a,d){return this.contains(d,[c.pageX,c.pageY])?1E9:this.modes.overlap.apply(this,arguments)},overlap:function(c, a,d){return Math.max(0,Math.min(d.bottom,a.bottom)-Math.max(d.top,a.top))*Math.max(0,Math.min(d.right,a.right)-Math.max(d.left,a.left))},fit:function(c,a,d){return this.contains(d,a)?1:0},middle:function(c,a,d){return this.contains(d,[a.left+a.width*0.5,a.top+a.height*0.5])?1:0}},sort:function(c,a){return a.winner-c.winner||c.index-a.index},tolerate:function(c){var a,d,g,e,h,m,j=0,k,p=c.interactions.length,n=[b.event.pageX,b.event.pageY],o=b.tolerance||b.modes[b.mode];do if(k=c.interactions[j]){if(!k)return; k.drop=[];h=[];m=k.droppable.length;if(o)g=b.locate(k.proxy);a=0;do if(d=k.droppable[a]){e=f.data(d,b.datakey);if(d=e.location){e.winner=o?o.call(b,b.event,g,d):b.contains(d,n)?1:0;h.push(e)}}while(++a<m);h.sort(b.sort);a=0;do if(e=h[a])if(e.winner&&k.drop.length<b.multi){if(!e.active[j]&&!e.anyactive)if(i.drag.hijack(b.event,"dropstart",c,j,e.elem)[0]!==false){e.active[j]=1;e.anyactive+=1}else e.winner=0;e.winner&&k.drop.push(e.elem)}else if(e.active[j]&&e.anyactive==1){i.drag.hijack(b.event,"dropend", c,j,e.elem);e.active[j]=0;e.anyactive-=1}while(++a<m)}while(++j<p);if(b.last&&n[0]==b.last.pageX&&n[1]==b.last.pageY)delete b.timer;else b.timer=setTimeout(function(){b.tolerate(c)},b.delay);b.last=b.event}};i.dropinit=i.dropstart=i.dropend=b})(jQuery); \ No newline at end of file
diff --git a/slick.grid.js b/slick.grid.js
index a1535d4..7f53536 100644
--- a/slick.grid.js
+++ b/slick.grid.js
@@ -1868,6 +1868,17 @@ if (!jQuery.fn.drag) {
return {row:row,cell:cell-1};
}
+ function getCellFromEvent(e) {
+ var $cell = $(e.target).closest(".slick-cell", $canvas);
+ if (!$cell.length)
+ return null;
+
+ return {
+ row: $cell.parent().attr("row") | 0,
+ cell: getSiblingIndex($cell[0])
+ };
+ }
+
function getCellNodeBox(row,cell) {
if (!cellExists(row,cell))
return null;
@@ -2446,6 +2457,7 @@ if (!jQuery.fn.drag) {
"resizeCanvas": resizeCanvas,
"updateRowCount": updateRowCount,
"getCellFromPoint": getCellFromPoint,
+ "getCellFromEvent": getCellFromEvent,
"getCurrentCell": getCurrentCell,
"getCurrentCellNode": getCurrentCellNode,
"resetCurrentCell": resetCurrentCell,
generated by cgit v1.1 at 2025-06-01 17:25:02 +0000