Draggable add element
How do I make an draggable add element?
Greensock Forumshttp://forums.greensock.com/topic/8248-drag-new-element-from-the-div/. What is a draggable add element? How do you make a draggable add element? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.
Draggable add element - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Draggable add element</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="parent"> <div class="element"></div> <div class="newElement"></div> <div style="clear:both;"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Draggable add element - Script Codes CSS Codes
body
{ background:#333; margin:0;
}
#parent
{ border:solid 2px #fff; margin:50px; position:relative; clear:both; min-height:300px;
}
.element, .newElement
{ background:#CCC; border:solid 1px #0FF; position:absolute; width:100px; height:100px; margin:10px; float:left; z-index:10;
}
.newElement
{ border:solid 1px blue; background:red; z-index:100; opacity:0;
}
Draggable add element - Script Codes JS Codes
var parent = $("div#parent"), elements = $("div.element"), currentID = 0, newElements = $("div.newElement"), latest;
$.each(elements, function(index, element)
{ $(element).attr('id','element'+index); currentID++; $(element).html('Element N°: ' + index);
});
$.each(newElements, function(index, element)
{ $(element).attr('id','element'+currentID); currentID++; //create the draggable instance for the current element in the DOM createDraggable(element);
});//new element loop end
function addElement()
{ var newElement = '<div class="newElement" id="element' + currentID + '"></div>'; parent.append(newElement); newElements = $("div#element"+currentID) //create the draggable instance for the new element createDraggable(newElements); //update the ID number currentID++;
}
function createDraggable(element)
{ Draggable.create($(element), { type:'x,y', bounds:'#parent', edgeResistance:0.85, onDragStart:function() { TweenMax.to(this.target, .2, {opacity:1}); //add just one element if(!$(this.target).hasClass("dragged")) { addElement(); $(this.target).addClass("dragged"); } } });//draggable instance end
}
Developer | Rodrigo Hernando |
Username | rhernando |
Uploaded | November 18, 2022 |
Rating | 3 |
Size | 2,378 Kb |
Views | 16,192 |
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!
Name | Size |
Simple Interactive 3D Cube | 2,985 Kb |
Transform Orign | 2,051 Kb |
Greensock Bezier Morph | 2,463 Kb |
Greensock Draggable latest update | 2,971 Kb |
Simple Dragging Direction | 2,374 Kb |
Animate SVG Gradient | 2,239 Kb |
Toggle Tween Direction | 2,325 Kb |
Simple scroll controlled animation | 2,229 Kb |
Spinning Images | 2,279 Kb |
Circular Progress Bar | 4,985 Kb |
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!
Name | Username | Size |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Twitch TV | Natester13 | 4,488 Kb |
Review test | Otro_user_gil | 4,054 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
GrcJS | Vino6 | 2,047 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!