I have some image assets (folders in this example), where I can drag around and then use the "reset" button to essentially clean them up. However, after you reset the positions and try to drag again, it takes you all the way back to where you dragged it previously? Odd right??? Any help is greatly appreciated!
Again, looking to just solve for:
Let the user drag a folder/image
Let the user reset/clean-up
Let the user drag again, but starting from "reset"
"use strict";
// Reset Folder position on Clean Up
$(".reset-position").click(function () {
// Reset position
$(".resize-drag").removeAttr("style").css("transition", ".5s");
setTimeout(function () {
$(".resize-drag").removeAttr("style");
}, 600);
});
interact(".resize-drag")
.draggable({
onmove: window.dragMoveListener,
})
.resizable({
preserveAspectRatio: false,
edges: { left: false, right: false, bottom: false, top: false },
})
.on("resizemove", function (event) {
var target = event.target,
x = parseFloat(target.getAttribute("data-x")) || 0,
y = parseFloat(target.getAttribute("data-y")) || 0;
// update the element's style
target.style.width = event.rect.width + "px";
target.style.height = event.rect.height + "px";
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
"translate(" + x + "px," + y + "px)";
target.setAttribute("data-x", x);
target.setAttribute("data-y", y);
target.textContent = event.rect.width + "×" + event.rect.height;
});
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);
}
:root {
--font-color: #000;
--font-size: 13px;
}
html,
body {
overflow: hidden;
background:white;
}
p {
font-size: var(--font-size);
text-align: center;
padding-top: 5px;
color: var(--font-color) !important;
}
.folder-container-1 {
width: 82px;
position: absolute;
right: 30px;
top: 10%;
cursor: pointer;
}
#folders {
width: 82px;
display: flex;
align-content: center;
justify-content: center;
}
#folders:active {
opacity: 0.7;
transform: rotate(4deg);
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
border: 1px solid grey;
}
.resize-drag {
box-sizing: border-box;
touch-action: none !important;
user-select: none !important;
}
.resize-container {
width: 100%;
height: 240px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Folder Reset Position</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="folder-container-1">
<div class="folder-1 resize-drag projects-folder" data-target="#myProjects">
<img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
<p>Folder 1</p>
</div>
<div class="folder-1 resize-drag components-folder" data-target="#myComponents">
<img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
<p>Folder 2</p>
</div>
<div class="folder-1 resize-drag about-folder" data-target="#aboutMe">
<img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
<p>Folder 3</p>
</div>
<button class="reset-position">Reset</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<script src="/script.js"></script>
<script src="/drag.js"></script>
</html>
You have the data-x/data-y attribute still attached to the draggable even after reset. Try removing that and it should work fine.
I'm quite not sure why you need setTimeout to remove the style attribute though. I have added an extra statement to remove data-x and data-y. Maybe you can clean that up to a single statement
$(".reset-position").click(function () {
// Reset position
$(".resize-drag").removeAttr("style").css("transition", ".5s");
$(".resize-drag").removeAttr('data-x data-y');
setTimeout(function () {
$(".resize-drag").removeAttr("style");
}, 600);
});
Related
following is my code, I wanna stop transtion but keep its current translateY, but following code stop transition and set translateY 0, I expect a way can get current translateY when transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style>
.it {
width: 300px;
height: 300px;
background-color: pink;
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
</style>
</head>
<body>
<div class="it">
</div>
<script type="module">
var it = document.querySelector(".it")
setTimeout(() => {
it.style.transform = "translateY(500px)"
}, 100)
setTimeout(() => {
it.style.transform = null
}, 1000)
</script>
</body>
</html>
I wrote a method I don't know if it will satisfy you
<style>
.it {
width: 300px;
height: 300px;
background-color: pink;
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.it-class {
transform: translateY(500px) ;
}
</style>
</head>
<body>
<div class="it">
</div>
<button>stop</button>
<script>
var it = document.querySelector(".it")
const button = document.querySelector("button")
button.onclick = () => {
it.classList.toggle('it-class')
}
</script>
I find solution, use getBoudingRectClient().y and window.scrollY can get element abs pos y in document;
so get parent abs_pos_y and element abs_pos_y to get current element pos y from parent top border(rel_pos_y),
cur_translateY = rel_pos_y - element.offsetTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style>
.c {
position: relative;
border: 5px solid black;
width: 300px;
height: 300px;
}
.it {
margin-top: -200px;
width: 300px;
height: 300px;
background-color: pink;
transition: 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
</style>
</head>
<body>
<div class="c">
<div class="it">
</div>
</div>
<script type="module">
var it = document.querySelector(".it")
// offsetTop don't calc translateY, so use following get element abs pos y in document
var getPos = (e) => {
var rect = e.getBoundingClientRect()
return {
x: rect.x + window.scrollX,
y: rect.y + window.scrollY
}
}
setTimeout(() => {
it.style.transform = "translateY(300px)"
}, 100)
//
setTimeout(() => {
var c = document.querySelector(".c")
var cy = getPos(c).y
console.log(`cy:${cy}`)
var iy = getPos(it).y
console.log(`iy:${iy}`)
it.style.transform = `translateY(${iy - cy - it.offsetTop}px)` // iy - cy is element dist from parent top border, - it.offsetTop get translateY
}, 800)
</script>
</body>
</html>
I am using blockly to create my program. I have blockly downloaded from this github location, and I'm trying to replace blockly images path from this location: https://blockly-demo.appspot.com/static/media/sprites.png to this (relative) location: sprites.png. but I don't know how to do this.
Question is: Where I can set this path?
Here is my page code (in root folder of blockly):
<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
<meta charset="UTF-8">
<title>Blockly Test</title>
<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="msg/js/en.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0;">
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
// toolbox codes are here.
</xml>
<div id="blocklyArea" style="position: absolute; width: 100%; height: 100%;"></div>
<div id="blocklyDiv" style="position: absolute;"></div>
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById("toolbox")});
var onresize = function(e) {
// Compute the absolute coordinates and dimensions of blocklyArea.
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// Position blocklyDiv over blocklyArea.
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
Blockly.svgResize(workspace);
//document.body.innerHTML = document.body.innerHTML.replace(/https:\/\/blockly\-demo\.appspot\.com\/static\/media\/sprites\.png/gi, "sprites.png");
</script>
<button id="generator" onclick="try { eval(Blockly.JavaScript.workspaceToCode(workspace)); } catch (e) { alert(e); }" style="position: absolute; margin: 25px; right: 0; width: 80px; height: 80px; border-radius: 50%; border: 5px solid teal; background: darkcyan; color: white; font-size: x-large; outline: none; cursor: pointer;">⯈</button>
</body>
</html>
Sorry for bad english.
You can change the media path while injecting blockly. Refer to media option while doing Blockly.inject() call.
In your case you can do something like -
var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById("toolbox"), media: './'});
I wanted to recreate the text colour overlay clip-path effect from this site http://fleurmoreau.fr/
I made a version here https://codepen.io/Kerrys7777/pen/eYOrwbV. It seems to work OK, but hovering some areas seems to cause a bubbling effect? What can I change to make it smooth and functional?
I was following the tutorial https://www.youtube.com/watch?v=l_ahowxmqzg but using pure JavaScript.
I think the 'mouseout' function/method is causing this (bubbling) issue?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="all">
<style>
#import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,700|Titillium+Web:200,400,400i,700&display=swap');
:root {
--maskX: 0;
--maskY: 50;
}
*,*:before,*:after {
box-sizing: border-box;
}
body {
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
line-height: 1.4;
color: #161B1E;
}
h1,
h2,
h3,
h4
{
font-family: 'Cormorant Garamond', serif;
margin: 0;
}
h1 {
font-size: 15vw;
}
#titleContainer {
position: relative;
margin: 100px 0 0 50px;
display: inline-block;
}
p {
margin-left: 80px;
font-size: 1em;
}
.titleWrapper {
cursor: pointer;
color: #D4BBAB;
padding: 30px;
/*--maskX: 0;
--maskY: 50;*/
}
.cloneWrapper {
position: absolute;
top: 0;
left: 0;
color:#f2dcca;
/*clip-path: polygon(0 0, calc(var(--maskX) * 1%) 0, calc(var(--maskY) * 1%) 100%, 0% 100%);*/
transition: all 0.8s cubic-bezier(0.165,0.84,0.44,1);
clip-path: polygon(0 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * .4%) 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * -.4%) 100%,0 100%)
}
</style>
</head>
<body>
<section id="titleContainer">
<div class="titleWrapper">
<h1>Text Effect</h1>
</div>
<div class="titleWrapper cloneWrapper">
<h1>Text Effect</h1>
</div>
</section>
<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
<script>
//GET MOUSE POSITION RELATIVE TO THIS ELEMENT
var titleContainerBox = document.getElementById("titleContainer");
//ADD EVENT (MOUSEMOVE) LISTENER
titleContainerBox.addEventListener("mousemove", function(event) {
mousePosMove(event);
});
//ADD EVENT (RESIZE) LISTENER
titleContainerBox.addEventListener("resize", function(event) {
mousePosMove(event);
});
/*['mousemove','resize'].forEach( evt =>
titleContainerBox.addEventListener(evt, mousePosMove(event), false)
);*/
function mousePosMove(e) {
//GET CONTAINER DIMENSIONS
var rect = titleContainerBox.getBoundingClientRect();
var width = titleContainerBox.clientWidth;
var height = titleContainerBox.clientHeight;
//MOUSE POSITION PX INSIDE titleContainer
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
//MOUSE POSITION PERCENTAGE INSIDE titleContainer
var oX = Math.floor((x/width) * 100);
var oY = Math.floor((y/height) * 100);
//UPDATE CSS VARIABLES
titleContainerBox.style.setProperty('--maskX', oX);
titleContainerBox.style.setProperty('--maskY', oY);
//SHOW INFO IN PAGE
var mouseCoordinates = "Coordinates: (" + x + ", " + y + ")" + "<br>" + " Dimensions: (" + width + ", " + height + ")" + "<br>" + " Percentage relative position: (" + oX + ", " + oY + ")";
document.getElementById("demo").innerHTML = mouseCoordinates;
}
//ADD EVENT (MOUSEOUT) LISTENER TO REMOVE EFFECT
titleContainerBox.addEventListener("mouseout", function(event) {
mousePosOut(event);
});
function mousePosOut(e) {
//SET CSS VARIABLES TO ZERO (REMOVE EFFECT)
setTimeout(function() {
titleContainerBox.style.setProperty('--maskX', 0); //-16 VALUE TO CORRECT CORNER ISSUE
titleContainerBox.style.setProperty('--maskY', 0);
}, 1000);
}
</script>
</body>
</html>
BTW where has the live example code setup window gone here at SO?
The mouseout event was causing the issue. Changed to mouseleave and some other minor tweaks. Seems to work fine now.
//GET MOUSE POSITION RELATIVE TO THIS ELEMENT TO FEED CLIP-PATH CSS VARIABLE VALUES
var titleContainerBox = document.getElementById("titleContainer");
//ADD EVENT (MOUSEMOVE) LISTENER
titleContainerBox.addEventListener("mousemove", function(event) {
mousePosMove(event);
});
//ADD EVENT (RESIZE) LISTENER
titleContainerBox.addEventListener("resize", function(event) {
mousePosMove(event);
});
/*['mousemove','resize'].forEach( evt =>
titleContainerBox.addEventListener(evt, mousePosMove(event), false)
);*/
function mousePosMove(e) {
//GET CONTAINER DIMENSIONS
var rect = titleContainerBox.getBoundingClientRect();
var width = titleContainerBox.clientWidth;
var height = titleContainerBox.clientHeight;
//MOUSE POSITION PX INSIDE titleContainer
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
//MOUSE POSITION PERCENTAGE INSIDE titleContainer
var oX = Math.floor((x/width) * 100);
var oY = Math.floor((y/height) * 100);
//UPDATE CSS VARIABLES
titleContainerBox.style.setProperty('--maskX', oX);
titleContainerBox.style.setProperty('--maskY', oY);
//SHOW INFO IN PAGE
var mouseCoordinates = "Coordinates: (" + x + ", " + y + ")" + "<br>" + " Dimensions: (" + width + ", " + height + ")" + "<br>" + " Percentage relative position: (" + oX + ", " + oY + ")";
document.getElementById("demo").innerHTML = mouseCoordinates;
}
//ADD EVENT (MOUSEOUT) LISTENER TO REMOVE EFFECT
titleContainerBox.addEventListener("mouseleave", function( event ) {
//SET CSS VARIABLES TO ZERO AFTER A SHORT DELAY
setTimeout(function() {
titleContainerBox.style.setProperty('--maskX', -16);
titleContainerBox.style.setProperty('--maskY', 0);
}, 700);
}, false);
#import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,700|Titillium+Web:200,400,400i,700&display=swap');
:root {
--maskX: 0;
--maskY: 50;
}
*,*:before,*:after {
box-sizing: border-box;
}
body {
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
line-height: 1.4;
color: #161B1E;
}
h1,
h2,
h3,
h4
{
font-family: 'Cormorant Garamond', serif;
margin: 0;
}
h1 {
font-size: 15vw;
}
#titleContainer {
position: relative;
z-index: 3;
margin: 100px 0 0 50px;
}
p {
margin-left: 80px;
font-size: 1em;
}
.titleWrapper {
cursor: pointer;
color: #D4BBAB;
padding: 30px;
/*--maskX: 0;
--maskY: 50;*/
}
.cloneWrapper {
position: absolute;
top: 0;
left: 0;
color:#f2dcca;
/*clip-path: polygon(0 0, calc(var(--maskX) * 1%) 0, calc(var(--maskY) * 1%) 100%, 0% 100%);*/
transition: all 0.8s cubic-bezier(0.165,0.84,0.44,1);
clip-path: polygon(0 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * .4%) 0,calc(var(--maskX) * 1% + (var(--maskY) - 50) * -.4%) 100%,0 100%)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Clip Path Text Colour Effect</title>
</head>
<body>
<section id="titleContainer">
<div class="titleWrapper">
<h1>Text Effect</h1>
</div>
<div class="titleWrapper cloneWrapper">
<h1>Text Effect</h1>
</div>
</section>
<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
</body>
</html>
i need a draggable div not to go outside of second div frame, so far i managed to make a "collision" basically returning true or false if draggable div is inside the frame of other div. So the thing now is that i cant get this to work, i was trying to get it to a x = 90(example) when it hits the frame and few more examples , but i just can't get this to work. The draggable div doesn't want to go back to position.
Here is a JSFiddle: https://jsfiddle.net/kojaa/x80wL1mj/2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Catch a ball</title>
</head>
<body>
<div class="catcherMovableArea" id="catcherMovableArea">
<div id="catcher" class="catcher"></div>
</div>
<script src="script.js"></script>
</body>
</html>
.catcherMovableArea {
position: absolute;
border: 1px solid black;
width: 1900px;
top: 90%;
height: 50px;
}
.catcher {
position: absolute;
width: 250px;
height: 30px;
border-radius: 10px;
background-color: black;
top: 20%;
}
let catcher = $("#catcher");
$(document).mousemove(function(e) {
catcher.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit"
});
let catcherOffset = $(catcher).offset();
let CxPos = catcherOffset.left;
let CyPos = catcherOffset.top;
let catcherYInMovableArea, catcherXInMovableArea = true;
while(!isCatcherYinMovableArea(CyPos)){
catcherYInMovableArea = false;
break;
}
while(!isCatcherXinMovableArea(CxPos)){
catcherXInMovableArea = false;
break;
}
});
function isCatcherYinMovableArea(ypos){
if(ypos < 849.5999755859375 || ypos > 870.5999755859375) {
return false;
} else {
return true;
}
}
function isCatcherXinMovableArea(xpos){
if(xpos < 8 || xpos > 1655 ) {
return false;
} else {
return true;
}
}
By default, the collision option will prevent the element from being placed outside of the window. You want to prevent it from moving outside of a specific element.
To do this, use the within option to select which element should be used for containment.
Example:
let draggable = $("#draggable");
$(document).mousemove(function(e) {
draggable.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit",
within: "#container"
});
});
#container { width: 200px; height: 100px; border-style: solid }
#draggable { width: 50px; height: 50px; background-color: black }
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>
<div id="container">
<div id="draggable"></div>
</div>
I am working on a Tablet-environment with draggable objects.
The drag & drop works, it is even possible to drag several objects at once, when implemented.
References are :
Reference 1 & Reference 2
This is how the current version of my code looks like:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta
name='viewport'
content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,'
/>
<!--
Refernces:
* https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Drag_and_Drop
* https://mobiforge.com/design-development/touch-friendly-drag-and-drop
-->
<style>
#container {
width: 200px;
height: 200px;
position: relative;
background: yellow;
top: 100px
}
main1 {
position: relative;
}
div1 {
position: absolute;
top: 0px;
left: 100px;
height: 72px;
width: 72px;
background: red;
border: 0px solid #666;
margin: 0;
padding: 0;
}
</style>
<title>Clean up</title>
</head>
<body>
<div id ="container">
</div>
<main1 id="main1">
<div1 class="draggable" id="d1-0""></div1>
</main1>
<script>
var nodeList = document.getElementsByClassName('draggable');
for(var i=0;i<nodeList.length;i++) {
var obj = nodeList[i];
obj.addEventListener('touchmove', function(event) {
var touch = event.targetTouches[0];
// Place element where the finger is
event.target.style.left = touch.pageX + 'px';
event.target.style.top = touch.pageY + 'px';
event.preventDefault();
}, false);
}
</script>
</body>
</html>
The idea is, that the red box (div1) can be moved, dragged and dropped everywhere on the screen. But it needs to be moved to its very initial starting position, when it enters the yellow canvas. (The idea is to "clean up" and "move objects back to where they came from".)
You should use jQuery UI's draggable and touch punch for mobile friendliness
Let me know if this is close to what you're looking for and we can adjust as needed
$(document).ready(function() {
$('#div1').draggable();
$('#container').droppable({
drop: function( event, ui ) {
alert("You dropped the red on the yellow");
}
});
$(document).on("click", "#animateBtn", function() {
//Simple animate w/ just specifying the offsets
//$('#div1').animate({top:"250px", left:"250px"});
//Other animate options
$('#div1').animate({
top:"15px",
left:"15px"
}, {
duration:555, //Animation time in pixels
easing:"easeOutQuart" //See https://api.jqueryui.com/easings/
});
});
});
#container {
width: 200px;
height: 200px;
position: relative;
background: yellow;
top: 100px
}
body {
position: relative;
}
#div1 {
position: absolute;
top: 0px;
left: 100px;
height: 72px;
width: 72px;
background: red;
border: 0px solid #666;
margin: 0;
padding: 0;
}
#animateBtn {
position:fixed;
right:10px;
bottom:10px;
display:inline-block;
padding:3px 5px;
background-color:green;
color:white;
border-radius:6px
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta
name='viewport'
content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,'
/>
<title>Drag and Drop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div id="container"></div>
<div class="draggable" id="div1"></div>
<div id="animateBtn">Animate</div>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta
name='viewport'
content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,'
/>
<title>Drag and Drop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
#container {
width: 200px;
height: 200px;
position: relative;
background: yellow;
top: 100px
}
body {
position: relative;
}
#div1 {
position: absolute;
top: 100px;
left: 100px;
height: 72px;
width: 72px;
background: red;
border: 0px solid #666;
margin: 0;
padding: 0;
}
</style>
<title>Clean up</title>
</head>
<body>
<div id="container"></div>
<div class="draggable" id="div1"></div>
<!--<div id="animateBtn">Animate</div>-->
<script>
$(document).ready(function() {
$('#div1').draggable();
$('#container').droppable({
drop: function() {
$('#div1').animate({top:"100px", left:"100px"});
}
});
});
</script>
</body>
</html>
I didn't see a mention of jQuery but w3schools has a working example that goes without. Could you some touchup though:
/**
* Make object draggable
* #param {Element} element
*/
const addDraggable = (element)=> {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
const dragMouseDown = e => {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
[pos3, pos4] = [e.clientX, e.clientY];
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
};
const elementDrag = e => {
console.log(e.clientX, e.clientY);
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
[pos1, pos2] = [pos3 - e.clientX, pos4 - e.clientY];
[pos3, pos4] = [e.clientX, e.clientY];
// set the element's new position:
[element.style.top, element.style.left] =
[(element.offsetTop - pos2) + "px", (element.offsetLeft - pos1) + "px"];
};
const closeDragElement = _ => {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
};
element.onmousedown = dragMouseDown;
}
document.addEventListener("DOMContentLoaded", event=> {
_('#logo-top').addEventListener('click', event=> {
event.stopPropagation();
_('#logo-top').classList.toggle('active');
_('nav').forEach( n=> n.classList.toggle('collapsed') );
_('main').classList.toggle('extended');
});
addDraggable( _('#help-text') );
_( '#help' ).addEventListener( 'click', ()=>{ _('#help-text').classList.toggle('active')} );
_( '#help-text-close' ).addEventListener( 'click', ()=>{_('#help-text').classList.toggle('active')} );
});
Another way would be to use the Drag Operations