How to make a div draggable on another div? - javascript

I need to make a div dragable over the another div . How to do this ?
This is my html and i made this responsive using media query
<style>
.text-canvas{
z-index:1;
position:absolute;
}
.imageupload{
z-index:-1;
}
</style>
<script>
function submit_button(){
alert('hiii');
}
</script>
<div class="parent-canvas">
<div class="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="img.png">
</div>
</div>
</div>
Here i need to make this text-canvas div dragabble, so that user can drag that my text and he can place it on any where in the image (only inside image-canvas div ).
I see the html drag and drop , but i didn't understand how to apply this .

Based on your html : Add this script
$( ".text-canvas"").draggable({
containment: ".imageupload"
});
For any doubts in syntax or working check these documents
(1) http://api.jqueryui.com/draggable/
(2) https://jqueryui.com/draggable/
Make sure you already included jquery-ui.js . First you need to call jquery.js or jquery.min.js then only call jquery-ui.js , the order is important.
eg:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Check Out HTML5 Drag And Drop
HTML5 Drag & Drop

Create targets for draggable elements.Enable any DOM element to be droppable, a target for draggable elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept.
Theming
The droppable widget uses the jQuery UI CSS framework to style its look and feel. If droppable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:
ui-droppable: The droppable element. When a draggable that can be dropped on this dropppable is activated, the ui-droppable-active class is added. When dragging a draggable over this droppable, the ui-droppable-hover class is added.
link https://jqueryui.com/droppable/

See the Draggable example from jQuery UI here

Related

How to drag copy of element over the image using jquery?

I have a simple div element which I want to drag over the image but when I am dragging that div element over the image then it's not displaying there.
1. I want to drag copy of element over the image
I have tried with different suggestions but I am not getting result which I want.
1. I have use helper:'clone'
--> It's making copy when I am using Clone with draggable but still it's not showing element over the image tag.
here I have mentioned my simple code so please check it. And suggest me to achieve my result.
#{
ViewBag.Title = "Draggable";
Layout = null;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div>
<div class="ui-visual-focus draggable" style="width:100px;">
Textbox
</div>
<br />
<div class="droppable">
<img src="~/Documents/employeeFormImage.png" />
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function () {
});
$(function () {
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
});
$('.droppable').droppable({
accept: ".draggable",
drop: function (event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.clone().appendTo(droppable);
}
});
});
</script>
If I got your issue right, then you can achieve this with small trick in CSS, you can have the <img> with position:absolute and make it fit the container droppable <div> then it will be something like this, also note that I removed helper.clone.
Update: draggble with resizable, note that I added css for .ui-visual-focus <div> and I enforced position absolute so that it will not push down the droppable area.
$(function () {
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable"
}).resizable();
$('.droppable').droppable({
accept: ".draggable",
});
});
img {
width: 300px;
height: auto;
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.ui-visual-focus {
position:absolute !important;
width: 100px;
height: 30px;
}
.image-container {
top: 20px;
position:relative;
width:300px;
max-height: 200px;
border:1px solid;
height:200px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div>
<div class="ui-visual-focus draggable" style="width:100px;">
Textbox
</div>
<br />
<div class="image-container droppable">
<img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80" />
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Jquery increase droppable snap threshold and reset it's position if a snap couldn't happen

I have these divs two are draggable with a snap two are droppable.
I can't find or figure a way to do the following:
make both draggable divs and both droppable divs behave the same without massive copy pasting code.
Increase the snap threshold to the point where the draggable div auto moves into place.
If the draggable div is placed to little inside the droppable div it needs to be reset to it's last snapped location.\
I am only a beginner so please inform me with any wrongs in my post so I can edit it and learn from them.
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#destination {
width: 150px;
height: 150px;
background-color: red;
}
#draggable { width: 150px; height: 150px; background:#eee;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ snap: "#destination" });
$( "#destination" ).droppable();
});
</script>
</head>
<body>
<div id="destination">
destination
</div>
<div id = "draggable">
<p>Drag me !!!</p>
</div>
<div id="destination">
destination
</div>
<div id = "draggable">
<p>Drag me !!!</p>
</div>
</body>
</html>
You can do like this.
Set same attribute to draggable target and droppable target separately to avoid copy and paste.
Use snapMode: 'inner' make draggable div moves into place auto. And snapTolerance can change the threshold.
Finally, revert:'invalid' means draggable div will revert to last position if placed to little inside the droppable div.
If you want to make draggable1 pair to droppable1, you can add another attribute and pass accept option to droppable() init function.
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
[data-action='droppable'] {
width: 150px;
height: 150px;
background-color: red;
}
[data-action='draggable'] { width: 150px; height: 150px; background:#eee;}
</style>
<script>
$(function() {
$( "[data-action='draggable']" ).draggable({
snap: "[data-action='droppable']",
snapMode: 'inner',
snapTolerance: 50,
revert: 'invalid'
});
$( "[data-action='droppable']" ).droppable({
accept: function(dragTarget) {
return $(this).attr('data-pair') === $(dragTarget).attr('data-pair');
}
});
});
</script>
</head>
<body>
<div id= "destination1" data-action='droppable' data-pair='1'>
destination1
</div>
<div id = "draggable1" data-action='draggable' data-pair='1'>
<p>Drag me1 !!!</p>
</div>
<div id= "destination2" data-action='droppable' data-pair='2'>
destination2
</div>
<div id = "draggable2" data-action='draggable' data-pair='2'>
<p>Drag me2 !!!</p>
</div>
</body>
</html>

Drag and drop for fill in the blanks using JQuery UI

Below is my scenario explanation in screenshot,
From the above mentioned picture.Brown box positions are defined as droppable and the below choices are draggable.If I drag drop it is working fine.
If I drag another option in already defined place its overlapping for example
What I want to do is it will replace text as "venerated" and already dropped text "supercious" will come back to the text of choices in below box.How can I do this .Please anyone help me to get out of this issue.
Below is my code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.box1
{
background: #E7AC9F;
height: 20px;
width: 100px;
display: inline-block;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
}
.di1{
border: 1px dotted #22BAA0;
margin: 10px;
padding: 10px;
width: 100px;
border-radius: 4px;
font-size: 14px;
cursor: move;
list-style: none;
display: inline-block;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$(".box1").sortable();
$(".box1").disableSelection();
$(".qitem2").draggable({
containment : "#container",
helper : 'clone',
revert : 'invalid'
});
$(".box1, #qlist2").droppable({
hoverClass : 'ui-state-highlight',
accept: ":not(.ui-sortable-helper)",
drop : function(ev, ui) {
$(ui.draggable).clone().appendTo(this);
$(ui.draggable).remove();
$(ui.draggable).removeAttr("style");
}
});
});
</script>
</head>
<body>
<p>The multi-coloured eyes,<div class="box1"></div>and striking facial cuts and curves<div class="box1"></div> the Siberian Husky as one of the most desirable and breeds <div class="box1"></div>of dogs. Originally from Siberia, they look like replicas of wolves; also, they are challenging to new owners due to their agility and<div class="box1"></div></p>
<div id="qlist2">
<div class="qitem2 di1">
Option 1
</div>
<div class="qitem2 di1">
Option 2
</div>
<div class="qitem2 di1">
Option 3
</div>
<div class="qitem2 di1">
Option 4
</div>
<div class="qitem2 di1">
Option 5
</div>
<div class="qitem2 di1">
Option 6
</div>
<div class="qitem2 di1">
Option 6
</div>
</div>
</body>
</html>
Just make an container for draggables elements so that whenever second element is dropped in droppable we can move first element in it's container
HTML :
<div id="qlist2">
<div id = "dragitem1-container" class="drag-container">
<div id="dragitem1" class="qitem2 di1">
Option 1
</div>
</div>
<div id = "dragitem2-container" class="drag-container">
<div id="dragitem2" class="qitem2 di1">
Option 2
</div>
</div>
<div id = "dragitem3-container" class="drag-container">
<div id="dragitem3" class="qitem2 di1">
Option 3
</div>
</div>
</div>
<div class="droppable-element">
</div>
JS:
$(document).ready(function() {
function makedraggable() {
$(".qitem2").draggable({
"revert": "invalid"
});
}
makedraggable();
$(".droppable-element").droppable({
"accept": ".qitem2",
"drop": function(event, ui) {
if ($(this).find(".qitem2").length) {
var $presentChild = $(this).find(".qitem2"),
currChildId = $presentChild.attr("id"),
$currChildContainer = $("#" + currChildId + "-container");
$currChildContainer.append($presentChild);
$presentChild.removeAttr("style");
makedraggable();
}
$(ui.draggable).clone().appendTo(this).removeAttr("style");
$(ui.draggable).remove();
}
})
})
I think this is what you want
https://jsfiddle.net/4bL4tfrt/

Jquery UI Draggable items appearing in one row

I have a simple draggable function here that I am using for a math game I am trying to get my numbers to appear in one row but currently with this code below they appear stacked on top of each other like this
1
2
3
4
How do i get them to be like this 1 2 3 4 5
<!DOCTYPE html>
<html>
<head>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
</head>
<body>
<div id="draggable1" class="ui-widget-content">
<p><img src="mypicturesurl.com is here;"></p>
</div>
<div id="draggable1" class="ui-widget-content">
<p><img src="mypictureurl.com;"></p>
</div>
<div id="draggable1" class="ui-widget-content">
<p><img src="Samepictureurl.com;"></p>
</div>
</body>
i am just testing all with the one function to see if i can get them into the row or not. Thank you for help
Use float: left; to make it horizontal.
.draggable1 img {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
}
Fiddle
First of all, you have multiple elements with the same ID draggable1 in your HTML. Javascript will fail to recognize all of them. If you need to select multiple elements consider using a class selector instead, which will allow you to select all of them at once. Then your javascript will change to:
$(function() {
$( ".draggable1" ).draggable();
});
and you will be able to drag all of your elements.
Next, your CSS is set to affect elements with ID: draggable (there are none). Instead, you should use the same class selector before (since there are multiple), and this will change to:
.draggable1 { width: 150px; height: 150px; padding: 0.5em; }
Finally, if you need them to start side by side, instead of stacked on top of each other, consider floating them left: float: left.
Also you should try to separate your HTML, CSS, and Javascript into separate files to keep the logic distinct as your application grows. This is considered good style.
You're going to want to make sure you add float: left to your CSS to make sure the elements start on the left side and remain horizontal. You must also make sure that you inherit this class with each element. Your code used the draggable ID, which none of your elements inherited. Additionally, element IDs should be different, so I made each element have a unique ID in the amended code below as well as changing the CSS type to a class:
<!DOCTYPE html>
<html>
<head>
<style>
.draggable { width: 150px; height: 150px; padding: 0.5em; float: left;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
</head>
<body>
<div id="draggable1" class="draggable ui-widget-content">
<p><img src="mypicturesurl.com is here;"></p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p><img src="mypictureurl.com;"></p>
</div>
<div id="draggable3" class="draggable ui-widget-content">
<p><img src="Samepictureurl.com;"></p>
</div>
</body>
</html>

how to add draggable "add image" icon in jquery

I am curious to know how to add add image icon using jquery as in stack overflow. When user clicks it, it increases its size and goes wherever user places it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 50px; height: 50px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<image src="/addImage" />
</div>
</body>
</html>
Here I have added simple image on which user should able to place where he wants to place image. I don't know how to increase the size of that div after dragging. Also I want to get the position where user have added it.
I also want it should ask to browse on pc to upload a image
This code will increase the size of the draggable after it is been dragged and will return the position (as offset) of the draggable-element:
$(function () {
$("#draggable").draggable({
stop: function( event, ui ) {
ui.helper.css({
width: '200px',
height: '200px'
});
$('#position').text('Top: ' + ui.position.top + ' Left: ' + ui.position.left)
}
});
});
Demo
Reference
.draggable()

Categories

Resources