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>
Related
<!DOCTYPE html>
<html>
<head>
<title>songs list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
.droppable {
width: 300;
height: 900px;
background: lightgrey;
}
</style>
</head>
<body>
<div class="draggable">
<p><a href="C:\Users\DELL\Desktop\drag and drop\static\Allah Duhai Hai.mp3"><EM> barish</EM></p>
</div>
<div class="draggable">
<p><EM> Aa Bhi Ja Mere Mehermaan</EM></p>
</div>
<div class="draggable">
<p><EM>Aa Bhi Ja Sanam</EM></p>
</div>
<div class="draggable">
<p><EM>Allah Duhai Hai </EM></p>
</div>
<div class="droppable">
</div>
<script type="text/javascript">
$('.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>
</body>
</html
#i have script for drag and drop drop audio files it works fine , but if i upload same audio once again into div it, goes again into that div, what i mean is i don't want to add that file if it is added once (i.e) drag and drop.
You could remove the class from the div after you complete the script using the .removeClass() method (https://api.jquery.com/removeclass/)
Something like this:
<script type="text/javascript">
$('.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);
$(this).removeClass('droppable');
}
});
</script>
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>
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/
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
I'm having a problem with jQuery UI draggable..
I with to scroll an element within a smaller parent element, so that it creates a kind of viewport.
However, I'm having an issue with the element being dragged as it's snapping to the edges of the port.
Been battling with this for a while now so could really use some help... please :)
Here is an example of the behaviour I'm trying to get : LINK
Here is a jsFiddle : LINK
and sample code:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- CSS -->
<style type="text/css">
#port{
width:50px;
height:100px;
border:1px solid red;
overflow:hidden;
}
#obj {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
border-radius: 10px;
text-align: center;
background-color: lightpink;
}
</style>
<!-- Javascript -->
<script>
$(function ()
{
$("#obj").draggable(
{
containment: "#port",
scroll: false,
axis: 'x'
});
});
</script>
<!-- HTML -->
<div id="port">
<div id="obj">
<p>Drag me</p>
</div>
</div>
DEMO
Hope this is what you need, since you specified axis:x , it will move only in x axis
$(function () {
$("#obj").draggable({
scroll: false,
axis: 'x',
});
});
Here is the solution.
<div id="port">
<div id="obj">
<p>This is my new paragraph</p>
</div>
</div>
$(function() {
$( "#obj" ).draggable();
});
Link: http://jsfiddle.net/3HVT5/
It works when you remove the containment: "#port" line in your original code.
DEMO
I guess this is what you need
$(function () {
$("#obj").draggable({
containment: 'parent',
axis: 'x',
drag: function (event, ui) {
var p = ui.helper.position();
$(this).stop().animate({
right: p.right,
left: p.left
}, 400, 'linear');
}
});
});
Found 'a' solution here, but not sure of it's elegance...
<div id="outer"> <!-- position: relative -->
<div id="inner"> <!-- position: absolute -->
<img id="img_1" src="http://media02.hongkiat.com/nature-photography/red-planet.jpg" width="300" height="100" />
</div>
</div>
$(function()
{
var img = $("#img_1").draggable(
{
containment: '#inner',
axis: 'x'
}),
h = img.height(),
w = img.width(),
outer = $('#outer'),
oH = outer.height(),
oW = outer.width(),
iH = h + (h - oH),
iW = w + (w - oW),
iT = '-' + ((iH - oH)/2) + 'px',
iL = '-' + ((iW - oW)/2) + 'px';
$('#inner').css({ width: iW, height: iH, top: iT, left: iL });
})
However, tried it out and it does exactly what I'm after. So failing anything better I will go with this. Here is a fiddle link for you guys to try it out.
Thanks for your help...