Simple Drag and Drop

Developer
Event Horizon
Size
3,208 Kb
Views
36,432
  1. Simple Drag and Drop Previews
  2. Simple Drag and Drop HTML Codes
  3. Simple Drag and Drop CSS Codes
  4. Simple Drag and Drop JS Codes

How do I make an simple drag and drop?

Custom Drag and Drop, not HTML5 drag and drop. What is a simple drag and drop? How do you make a simple drag and drop? This script and codes were developed by Event Horizon on 30 July 2022, Saturday.

Simple Drag and Drop Previews
IQ Test

Simple Drag and Drop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Drag and Drop</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Simple Drag and Drop - Script Codes CSS Codes

.dragMe{ display:inline-block; position:absolute; width:256px; height:256px; border:1px solid #000; z-index:1; background-color:rgba(0,150,225,0.33); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer;
}
#dropTarget{ display:inline-block; position:absolute; width:1024px; height:256px; border:2px solid #000; margin-left:512px; vertical-align:top;
}

Simple Drag and Drop - Script Codes JS Codes

/* * * GOAL: create simple class/prototype to start drag and detect a target * RULES: no HTML5 drag/drop * NOTES: needs option to go by upper left or center (defaulting to center right now), need to make pulling out of droptarget have the correct positioning * */
document.addEventListener("DOMContentLoaded", function() { var dragObject = function(dragel, targetel, dropin) { var oldX, oldY, newX, newY, x, y, pressed = false, self=this; self.dropin = dropin || false; self.dragel = dragel || undefined; self.targetel = targetel || undefined; function startdrag(event) { //console.log("startdrag"); pressed = true; oldX = event.clientX; oldY = event.clientY; if(targetel){ if(dragel.parentNode===targetel||targetel.contains(dragel)){ dragel.style.top=newY; dragel.style.left=newX; oldX = newX; //turn new x into old x	oldY = newY; } } drag(event); } function drag(event) { if (pressed) { //console.log("dragging"); self.dragged(); newX = event.clientX; //newX=mouse position x newY = event.clientY; if (!dragel.style.left) { //if style left doesn't exist x = dragel.offsetLeft; //x is left x } else { x = parseInt((dragel.style.left).slice(0, -2), 10); //x is last style.left, if it exists } if (!dragel.style.top) { y = dragel.offsetTop; } else { y = parseInt((dragel.style.top).slice(0, -2), 10); } if (dragel.style.position !== "absolute") { dragel.style.position = "absolute"; } if(targetel){ if (dragel.parentNode===targetel||targetel.contains(dragel)){ targetel.removeChild(dragel); document.body.appendChild(dragel); } } dragel.style.left = (x + newX - oldX) + "px"; //left x becomes x + new x(mouse position) - old x(old mouse position) dragel.style.top = (y + newY - oldY) + "px"; oldX = newX; //turn new x into old x oldY = newY; } } function drop(event) { //console.log("drop"); self.dropped(); pressed = false; if (detectTarget() && targetel && dropin) { //dragel.style.top = targetel.offsetTop + "px";//used to position exactly to top left corner of target //dragel.style.left = targetel.offsetLeft + "px";//used to position exactly to top left corner of target dragel.style.position="static";//if this is set to relative it will use top/left still targetel.appendChild(dragel); } } function detectTarget() { if (targetel) { //need to know targetel top, left, width, height, top to height = vertical area, left to width = horizontal area var telMaxdown = targetel.offsetTop + targetel.offsetHeight, telMaxright = targetel.offsetLeft + targetel.offsetWidth, delCenterT = dragel.offsetHeight / 2, delCenterL = dragel.offsetWidth / 2; if (dragel.offsetTop + delCenterT <= telMaxdown && dragel.offsetTop + delCenterT >= targetel.offsetTop) { if (dragel.offsetLeft + delCenterL <= telMaxright && dragel.offsetLeft + delCenterL >= targetel.offsetLeft) { return true; } } else { return false; } } } this.dragged = function() { }; //function for setting up a callback to be run this.dropped = function() { }; //function for setting up a callback to be run this.removeDrag=function(){ document.removeEventListener("mousemove",drag); dragel.removeEventListener("mousedown", startdrag); document.removeEventListener("mouseup", drop); return dragel; }; function init() { document.addEventListener("mousemove", drag); dragel.addEventListener("mousedown", startdrag); document.addEventListener("mouseup", drop); return self; } init(); }; //SETUP/USAGE var mydiv = document.createElement("div"); mydiv.className="dragMe"; mydiv.innerHTML="DRAG ME1"; var mydiv2 = document.createElement("div"); mydiv2.className="dragMe"; mydiv2.innerHTML="DRAG ME2"; var mydiv3 = document.createElement("div"); mydiv3.className="dragMe"; mydiv3.innerHTML="DRAG ME3"; var targetDiv = document.createElement("div"); targetDiv.id="dropTarget"; document.body.appendChild(mydiv); document.body.appendChild(mydiv2); document.body.appendChild(mydiv3); document.body.appendChild(targetDiv); var drag1 = new dragObject(mydiv, targetDiv, true); var drag2 = new dragObject(mydiv2, targetDiv, true); var drag3 = new dragObject(mydiv3, targetDiv, true); drag3.dropped=function(){ this.dragel.innerHTML="dropped!"; }; drag3.dragged=function(){ this.dragel.innerHTML="dragged!"; };
});
Simple Drag and Drop - Script Codes
Simple Drag and Drop - Script Codes
Home Page Home
Developer Event Horizon
Username Event_Horizon
Uploaded July 30, 2022
Rating 3
Size 3,208 Kb
Views 36,432
Do you need developer help for Simple Drag and Drop?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Event Horizon (Event_Horizon) Script Codes
Name
Window Designing
Very Animated Loading Bar
Content Panels
Textbox Memory
Comment Chains
XLSX and Vuejs
KSP altimeter
Confetti
Pure CSS mail icon
Mastermind Word Game
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!