Drag and drop with HTML5 and jQuery

Just for a testing purpose I’ve created a simple implementation of the drag and drop by using the HTML5 features.
One can drag a file (containing 6 comma separated coordinates) to the canvas and it will draw a triangle.
Or you can drag the texts into the input field…
Here is the markup:

<article>
    <canvas id="mainCanvas" class="todraginto" width="400" height="400"></canvas>

    <div id="firstToDrag" class="todrag" draggable="true">First content to be dragged.</div>
    <div id="secondToDrag" class="todrag" draggable="true">Second content to be dragged.</div>
    <div id="thirdToDrag" class="todrag" draggable="true">Third content to be dragged.</div>
    <div id="fourthToDrag" class="todrag" draggable="true">Fourth content to be dragged.</div>

    <input id="dragTargetInput" class="todraginto" />
</article>

and the corresponding JavaScript code:

    $('.todrag').on('dragstart', function (e) {
        var dataTransfer = e.originalEvent.dataTransfer;
        dataTransfer.effectAllowed = 'copy';
        dataTransfer.setData('Text', this.id);
    });

    $('.todraginto').on('dragover', function (e) {
        var event = e.originalEvent;
        if (event.preventDefault) {
            event.preventDefault();
        }
        event.dataTransfer.dropEffect = 'copy';
        return false;
    });
    
    $('#dragTargetInput.todraginto').on('drop', function (e) {
        var event = e.originalEvent;
        if (event.stopPropagation) {
            event.stopPropagation();
        }
        var dataTransfer = event.dataTransfer;
        var draggedId = dataTransfer.getData('Text');
        var draggedElement = $('#' + draggedId);
        var draggedText = draggedElement.text();
        draggedElement.remove();
        e.currentTarget.value = draggedText;
        return false;
    });
    
    $('#mainCanvas.todraginto').on('drop', function (e) {
        var event = e.originalEvent;
        if (event.stopPropagation) {
            event.stopPropagation();
        }
        var dataTransfer = event.dataTransfer;
        if (dataTransfer.files && dataTransfer.files.length > 0) {
            var reader = new FileReader();
            reader.onload = function (onloadEvent) {
                var coordinates = onloadEvent.target.result.split(',');
                var canvas = $('#mainCanvas');
                var ctx = canvas[0].getContext('2d');
                ctx.beginPath();
                ctx.moveTo(coordinates[0], coordinates[1]);
                ctx.lineTo(coordinates[2], coordinates[3]);
                ctx.lineTo(coordinates[4], coordinates[5]);
                ctx.fill();

            };

            var firstFile = dataTransfer.files[0];
            reader.readAsText(firstFile);
        }
    });

One Response to Drag and drop with HTML5 and jQuery

  1. debendra says:

    this is very much help full

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s