HTML5 Drag and Drop

HTML5 API includes Drag and Drop (DnD) native functionality

The event listener methods for all the drag and drop events accept Event object which has a readonly attribute called dataTransfer. The event.dataTransfer returns DataTransfer object associated with the event

This is the list of events fired during the different stages

Event	Description
dragstart	Fires when the user starts dragging of the object.
dragenter	Fired when the mouse is first moved over the target element while a drag is occuring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default.
dragover	This event is fired as the mouse is moved over an element when a drag is occuring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event.
dragleave	This event is fired when the mouse leaves an element while a drag is occuring. Listeners should remove any highlighting or insertion markers used for drop feedback.
drag	Fires every time the mouse is moved while the object is being dragged.
drop	The drop event is fired on the element where the drop was occured at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location.
dragend	Fires when the user releases the mouse button while dragging an object.

In this post we develop an application to handle the drag and drop events between two elements, and launch a HttpPost method in the server which will ends inserting the dragged value in database

The first step is the definition of the UXinterface, in sequence the display is this

We are adding h5utils.js file, with an implementation of AddEvent function to simplify our code

var AddEvent = (function () {
    if (document.addEventListener) {
        return function (el, type, fn) {
            if (el && el.nodeName || el === window) {
                el.addEventListener(type, fn, false);
            } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                    AddEvent(el[i], type, fn);
                }
            }
        };
    } else {
        return function (el, type, fn) {
            if (el && el.nodeName || el === window) {
                el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
            } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                    AddEvent(el[i], type, fn);
                }
            }
        };
    }
})();

Now the code to implement drag and drop events

    var pDragElement = document.createElement('p');

    var chemicalElements = document.querySelectorAll('div > p'), el = null;
    for (var i = 0; i < chemicalElements.length; i++) {

        el = chemicalElements[i];

        el.setAttribute('draggable', 'true');

        AddEvent(el, 'dragstart', dragStartElement);
        
        AddEvent(el, 'dragend', dragEndElement);        
    }

    function dragStartElement(e) {

        e.dataTransfer.effectAllowed = 'copy';
        e.dataTransfer.setData('Text', this.id);
        e.dataTransfer.setData('Type', this.innerHTML);
        
        this.style.backgroundColor = "#ffa31a";
    }
    
    function dragEndElement(e) {
        
        this.style.backgroundColor = "#fff9f0";
    }
    
    var divBoxElements = document.querySelector('#divBoxElements');

    AddEvent(divBoxElements, 'dragover', function (e) {

        if (e.preventDefault) e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
        return false;
    });

    AddEvent(divBoxElements, 'drop', function (e) {

        if (e.stopPropagation) e.stopPropagation();

        var element = e.dataTransfer.getData('Type');

        pDragElement.innerHTML = "Adding " + element + " element";

        var pClone = pDragElement.cloneNode(true);

        var newDiv = document.createElement("div");

        newDiv.appendChild(pClone);

        divBoxElements.appendChild(newDiv);

        InsertChemicalElement(element);

        return false;
    });

The function InsertChemicalElement will call the HttpPost server method

    function InsertChemicalElement(element) {
        
        var url = '@Url.Action("InsertChemicalElements", "Home")';

        $.post(url, { chemicalElement: element },
            
        function (data) {

            switch (data) {
                case 1:                    
                    divBoxElements.innerHTML = element + " inserted OK";
                    setTimeout(function() { divBoxElements.innerHTML = ""; }, 2000);
                    break;
                    
                default:
                    alert("Error inserting the element");
            }
        });
    }

The code in the server side makes use of EF, with one table and one stored procedure in the diagram

With a SOLID implementation, the code for inserting data is divided in two functions

    [HttpPost]
    public JsonResult InsertChemicalElements(string chemicalElement)
    {
        string[] elementData = chemicalElement.Split(':');

        string symbol = elementData[0].Trim();
        string name = elementData[1].Trim();

        int insertResult = _chemicalDatabase.InsertElement(symbol, name);

        return Json(insertResult);
    }


//////////


    public class ChemicalDatabase : IChemicalDatabase
    {
        public int InsertElement(string symbol, string name)
        {
            using (ChemicalsEntities entities = new ChemicalsEntities())
            {
                return entities.P_INSERT_ELEMENT(symbol, name);
            }
        }
    }