Open source

js/codes/bin.js

@@ -0,0 +1,80 @@
+function drag_logic()
+{
+	return;
+	function dragMoveListener (event) {
+		var target = event.target,
+				// keep the dragged position in the data-x/data-y attributes
+				x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
+				y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+
+		// translate the element
+		target.style.webkitTransform =
+		target.style.transform =
+			'translate(' + x + 'px, ' + y + 'px)';
+
+		// update the posiion attributes
+		target.setAttribute('data-x', x);
+		target.setAttribute('data-y', y);
+	}
+
+	interact('.draggable').draggable({
+		// inertia: true,
+		restrict: {
+			restriction: ".dcontain",
+			endOnly: true,
+			elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+		},
+		//autoScroll: true,
+		onmove: dragMoveListener,
+		onend: function (event) {
+			var textEl = event.target.querySelector('p');
+
+			textEl && (textEl.textContent =
+				'moved a distance of '
+				+ (Math.sqrt(event.dx * event.dx +
+										 event.dy * event.dy)|0) + 'px');
+		}
+	}).actionChecker(function (pointer, event, action) {
+		if (event.button !== 0) { // without this the right click isn't ideal [26/06/16]
+			return null;
+		}
+		return action;
+	});
+	window.dragMoveListener = dragMoveListener;
+
+
+	interact('.itemslot').dropzone({
+		// only accept elements matching this CSS selector
+		accept: '.draggable',
+		// Require a 75% element overlap for a drop to be possible
+		overlap: 0.75,
+
+		ondropactivate: function (event) {
+			// add active dropzone feedback
+			event.target.classList.add('drop-active');
+		},
+		ondragenter: function (event) {
+			var draggableElement = event.relatedTarget,
+					dropzoneElement = event.target;
+
+			// feedback the possibility of a drop
+			dropzoneElement.classList.add('drop-target');
+			draggableElement.classList.add('can-drop');
+			draggableElement.textContent = 'Dragged in';
+		},
+		ondragleave: function (event) {
+			// remove the drop feedback style
+			event.target.classList.remove('drop-target');
+			event.relatedTarget.classList.remove('can-drop');
+			event.relatedTarget.textContent = 'Dragged out';
+		},
+		ondrop: function (event) {
+			event.relatedTarget.textContent = 'Dropped';
+		},
+		ondropdeactivate: function (event) {
+			// remove active dropzone feedback
+			event.target.classList.remove('drop-active');
+			event.target.classList.remove('drop-target');
+		}
+	});
+}