DragDropListJS.js

DragDropList Plugin For Kendo

/**********************************************************************************
 * @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);

DragDropList usage

<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 ) ;
        }
    }
});