stiliyan/gist:72135f1867bc363a75af Secret

## gistfile1.txt
 <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <!-- Get version 1.1.0 of Fabric.js from CDN -->
        <script src="js/fabric.js"></script>

        <!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>


            $(function () {

            var canvas = new fabric.Canvas('canvas', {
                backgroundColor: 'black',
                selectionColor: 'blue',
                selectionLineWidth: 0
                // ...
            });

            var tiles = [
                "http://placehold.it/50/ff0000/000000",
                "http://placehold.it/50/ff0000/000000",
                "http://placehold.it/50/0000ff/000000"
            ];
            var offset = [
                0,
                200,
                400
            ];

            for (var i = 0; i < tiles.length; i++) {
                buildImage(i);
            }

            function buildImage(i) {
                fabric.Image.fromURL(tiles[i], function (img) {
                    img.scale(1.0).set({
                        left: offset[i],
                        top: 0,
                        selectable:true,
                        originX: 'left',
                        originY: 'top'
                    });
                    canvas.add(img).setActiveObject(img);
                });

            }

            function handleDragStart(e) {
                [].forEach.call(images, function (img) {
                    img.classList.remove('img_dragging');
                });
                this.classList.add('img_dragging');
            }

            function handleDragOver(e) {
                if (e.preventDefault) {
                    e.preventDefault(); // Necessary. Allows us to drop.
                }

                e.dataTransfer.dropEffect = 'copy'; // See the section on the DataTransfer object.
                // NOTE: comment above refers to the article (see top) -natchiketa

                return false;
            }

            function handleDragEnter(e) {
                // this / e.target is the current hover target.
                this.classList.add('over');
            }

            function handleDragLeave(e) {
                this.classList.remove('over'); // this / e.target is previous target element.
            }

            function handleDrop(e) {
                // this / e.target is current target element.

                if (e.stopPropagation) {
                    e.stopPropagation(); // stops the browser from redirecting.
                }

                var img = document.querySelector('#images img.img_dragging');

                console.log('event: ', e);

                var newImage = new fabric.Image(img, {
                    width: img.width,
                    height: img.height,
                    // Set the center of the new object based on the event coordinates relative
                    // to the canvas container.
                    left: e.layerX,
                    top: e.layerY
                });
                canvas.add(newImage);

                return false;
            }

            function handleDragEnd(e) {
                // this/e.target is the source node.
                [].forEach.call(images, function (img) {
                    img.classList.remove('img_dragging');
                });
            }


                // Bind the event listeners for the image elements
                var images = document.querySelectorAll('#images img');
                [].forEach.call(images, function (img) {
                    img.addEventListener('dragstart', handleDragStart, false);
                    img.addEventListener('dragend', handleDragEnd, false);
                });
                // Bind the event listeners for the canvas
                var canvasContainer = document.getElementById('canvas-container');
                canvasContainer.addEventListener('dragenter', handleDragEnter, false);
                canvasContainer.addEventListener('dragover', handleDragOver, false);
                canvasContainer.addEventListener('dragleave', handleDragLeave, false);
                canvasContainer.addEventListener('drop', handleDrop, false);


            });
        </script>
    </head>
    <body>


        <div id="canvas-container">
            <canvas id="canvas"  width="600" height="200"></canvas>
        </div>
        <div id="images">
            <img draggable="true" src="http://placehold.it/50/ff0000/000000" width="50" height="50"></img>
            <img draggable="true" src="http://placehold.it/50/ffff00/000000" width="50" height="50"></img>
            <img draggable="true" src="http://placehold.it/50/0000ff/000000" width="50" height="50"></img>
        </div>


    </body>
    </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8" />
	<!-- Get version 1.1.0 of Fabric.js from CDN -->
	<script src="js/fabric.js"></script>

	<!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>


	$(function () {

	var canvas = new fabric.Canvas('canvas', {
	backgroundColor: 'black',
	selectionColor: 'blue',
	selectionLineWidth: 0
	// ...
	});

	var tiles = [
	"http://placehold.it/50/ff0000/000000",
	"http://placehold.it/50/ff0000/000000",
	"http://placehold.it/50/0000ff/000000"
	];
	var offset = [
	0,
	200,
	400
	];

	for (var i = 0; i < tiles.length; i++) {
	buildImage(i);
	}

	function buildImage(i) {
	fabric.Image.fromURL(tiles[i], function (img) {
	img.scale(1.0).set({
	left: offset[i],
	top: 0,
	selectable:true,
	originX: 'left',
	originY: 'top'
	});
	canvas.add(img).setActiveObject(img);
	});

	}

	function handleDragStart(e) {
	[].forEach.call(images, function (img) {
	img.classList.remove('img_dragging');
	});
	this.classList.add('img_dragging');
	}

	function handleDragOver(e) {
	if (e.preventDefault) {
	e.preventDefault(); // Necessary. Allows us to drop.
	}

	e.dataTransfer.dropEffect = 'copy'; // See the section on the DataTransfer object.
	// NOTE: comment above refers to the article (see top) -natchiketa

	return false;
	}

	function handleDragEnter(e) {
	// this / e.target is the current hover target.
	this.classList.add('over');
	}

	function handleDragLeave(e) {
	this.classList.remove('over'); // this / e.target is previous target element.
	}

	function handleDrop(e) {
	// this / e.target is current target element.

	if (e.stopPropagation) {
	e.stopPropagation(); // stops the browser from redirecting.
	}

	var img = document.querySelector('#images img.img_dragging');

	console.log('event: ', e);

	var newImage = new fabric.Image(img, {
	width: img.width,
	height: img.height,
	// Set the center of the new object based on the event coordinates relative
	// to the canvas container.
	left: e.layerX,
	top: e.layerY
	});
	canvas.add(newImage);

	return false;
	}

	function handleDragEnd(e) {
	// this/e.target is the source node.
	[].forEach.call(images, function (img) {
	img.classList.remove('img_dragging');
	});
	}



	// Bind the event listeners for the image elements
	var images = document.querySelectorAll('#images img');
	[].forEach.call(images, function (img) {
	img.addEventListener('dragstart', handleDragStart, false);
	img.addEventListener('dragend', handleDragEnd, false);
	});
	// Bind the event listeners for the canvas
	var canvasContainer = document.getElementById('canvas-container');
	canvasContainer.addEventListener('dragenter', handleDragEnter, false);
	canvasContainer.addEventListener('dragover', handleDragOver, false);
	canvasContainer.addEventListener('dragleave', handleDragLeave, false);
	canvasContainer.addEventListener('drop', handleDrop, false);


	});
	</script>
	</head>
	<body>



	<div id="canvas-container">
	<canvas id="canvas" width="600" height="200"></canvas>
	</div>
	<div id="images">
	<img draggable="true" src="http://placehold.it/50/ff0000/000000" width="50" height="50"></img>
	<img draggable="true" src="http://placehold.it/50/ffff00/000000" width="50" height="50"></img>
	<img draggable="true" src="http://placehold.it/50/0000ff/000000" width="50" height="50"></img>
	</div>



	</body>
	</html>