Last active
August 29, 2015 14:17
-
-
Save sunilmurali/0e75b3ebe11bf8538d94 to your computer and use it in GitHub Desktop.
DragDropListJS.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/********************************************************************************** | |
* @description Kendo UI plugin for Drag Drop list | |
* @author Sunil Murali | |
* @extends Kendo UI | |
* @usage $(selector).kendoDragDropList({ | |
* options | |
* }); | |
*********************************************************************************/ | |
(function($) { | |
// shortening references to variables. | |
var kendo = window.kendo , | |
ui = kendo.ui , | |
Widget = ui.Widget , | |
CHANGE = "change" ; | |
var DragDropList = Widget.extend({ | |
// Called by the Kendo framework when using the plugin | |
init: function(element, options) { | |
var that = this ; | |
// base call to initialize widget | |
Widget.fn.init.call(this, element, options); | |
that._initLayout() ; | |
// Intialize template for drag drop section | |
that._initTemplate () ; | |
// initialize the datasource | |
that._dataSource () ; | |
//initialize drag drop functionality | |
that._initDragDrop () ; | |
$('.k-draggable.k-widget').css({ | |
"width": that.options.draggable.element.width, | |
"height":that.options.draggable.element.height | |
}); | |
$('.k-droppable.k-widget').css({ | |
"width": that.options.droppable.element.width, | |
"height":that.options.droppable.element.height | |
}); | |
}, | |
options: { // default Options for the DragDropList | |
name: "DragDropList", | |
autoBind: true, | |
draggable:{ // options for draggable section | |
template: "", | |
header:"", | |
fields:[], // fields can be resolved from the datasource | |
element:{ | |
height:"80px", | |
width:"500px" | |
} | |
}, | |
droppable: { // options for the droppable section | |
template:"", | |
header:"", | |
fields:[], // fields can be resolved from the datasource | |
element:{ | |
height:"80px", | |
width:"500px" | |
} | |
} | |
}, | |
_initLayout: function () { | |
var that = this ; | |
// create the drag drop area in the element | |
$(that.element).append('<div id="KendoDragDropSection" style="display: table-row; width:900px;">'+ | |
'<div style="display: table-cell; width:400px; background-color:#eee; margin-left:50px;" class="k-block"><div class="k-header">'+that.options.draggable.header+'</div><div id="kendoDraggable"></div></div>'+ | |
'<div style="display: table-cell; width:400px; background-color:#eee; margin-left:50px;" class="k-block"><div class="k-header">'+that.options.droppable.header+'</div><div id="kendoDroppable"></div></div>'+ | |
'</div>'); | |
}, | |
_initTemplate: function () { | |
that = this ; | |
// template for each draggable/droppable element | |
that.dragtemplate = kendo.template(('<div class="k-draggable k-widget">' + that.options.draggable.template + '</div>') || "<p class='k-draggable'><span class='k-button'>#= data #</span></p>") ; | |
that.droptemplate = kendo.template(('<div class="k-droppable k-widget">' + that.options.droppable.template + '</div>')|| "<p class='k-droppable'><span class='k-button'>#= data #</span></p>") ; | |
}, | |
_initDragDrop: function () { | |
var that = this ; | |
// handle the custom hint, dragstart, dragend event for draggable section in options: draggable : <<event>> | |
// default event changes the opacity, duh, what a waste | |
$(".k-draggable").kendoDraggable({ | |
hint: that.options.draggable.hint || function(e) { | |
return $(e).clone(); | |
}, | |
dragstart: that.options.draggable.dragstart || function(e){ | |
this.element.css({ | |
"opacity": 0.6 | |
}); | |
}, | |
dragend: that.options.draggable.dragend || function(e){ | |
this.element.css({ | |
"opacity": 1 | |
}); | |
} | |
}); | |
// handle the custom dragenter, dragleave,drop event for draggable section in options: droppable : <<event>> | |
// default event changes the opacity, duh, what a waste | |
$(".k-droppable").kendoDropTarget({ | |
dragenter: that.options.droppable.dragenter || function(e){ | |
this.element.css({ | |
"opacity": 0.6 | |
}); | |
}, | |
dragleave: that.options.droppable.dragleave || function(e){ | |
this.element.css({ | |
"opacity": 1 | |
}); | |
}, | |
drop: that.options.droppable.drop || function (e){ console.log ('Drop event not handled'); } | |
}); | |
}, | |
_dataSource: function() { | |
var that = this; | |
// Datasource for draggable section | |
that.DraggableDataSource = kendo.data.DataSource.create(that.options.draggable.fields); | |
// Datasource for droppable section | |
that.DropableDataSource = kendo.data.DataSource.create(that.options.droppable.fields ); | |
// bind to the change event to refresh the widget | |
that.DraggableDataSource.bind(CHANGE, function() { | |
that.dragrefresh(); | |
}); | |
// bind to the change event to refresh the widget | |
that.DropableDataSource.bind(CHANGE, function() { | |
that.droprefresh(); | |
}); | |
// trigger a read on the dataSource if one hasn't happened yet | |
if (that.options.autoBind) { | |
that.DraggableDataSource.fetch(); | |
that.DropableDataSource.fetch(); | |
} | |
}, | |
dragrefresh: function() { | |
var that = this, | |
dragview = that.DraggableDataSource.view(), | |
draghtml = kendo.render(that.dragtemplate, dragview); | |
$('#kendoDraggable').empty(); | |
$('#kendoDraggable').append( draghtml ); | |
}, | |
droprefresh: function() { | |
var that = this, | |
dropview = that.DropableDataSource.view(), | |
drophtml = kendo.render(that.droptemplate, dropview); | |
$('#kendoDroppable').empty( ); | |
$('#kendoDroppable').append( drophtml ); | |
} | |
}); | |
// Adding the plugin to the Kendo UI Library | |
if ( ui ) { | |
ui.plugin( DragDropList ); | |
} | |
else { | |
// Kendo UI not defined | |
throw "Kendo UI Initialization error" ; | |
} | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="dragdrop"> </div> | |
$("#dragdrop").kendoDragDropList({ | |
draggable: { | |
header:"Draggable Fields", | |
fields:["drag item1","drag item2", "drag item3"], | |
hint: function(e) { | |
return $(e).clone(); | |
}, | |
dragstart: function(e){ | |
}, | |
dragend: function(e){ | |
} | |
}, | |
droppable:{ | |
header:"Droppable Fields", | |
fields:["drop item1","drop item2", "drop item3"], | |
drop: function (e) { | |
console.log ( e.draggable ) ; | |
}, | |
dragenter: function(e){ | |
console.log ( e.draggable ) ; | |
}, | |
dragleave: function(e){ | |
console.log ( e.draggable ) ; | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment