<!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>
Related
I'm working on a drag and drop project where items can be added to a work area and dragged to be positioned. I am trying to use a key code to create multiple of the same kind of element, all of which can be dragged. The jQuery function works as long as the draggable element is created when the page loads, but if it's created using a function, the draggable() method isn't working on it. Is there a way to get the function to recognize the element created with a function?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Draggable Div Test</title>
<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>
<style>
.test {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="area" style="border: 1px solid black; width: 500px; height: 500px;"> </div>
<script>
var area = document.getElementById("area");
function duplicate(e) {
switch(e.keyCode) {
case 49:
var test = document.createElement("div");
test.classList.add("test");
test.classList.add("draggable");
console.log(test.classList)
test.style.backgroundColor = "blue";
area.appendChild(test);
break
}
}
document.addEventListener("keydown", duplicate)
$( function() {
$( ".test" ).draggable();
} );
</script>
</body>
</html>
Thanks
jQuery draggable has a function called clone:
$(function() {
i = 0
$("#draggable").draggable({
helper: 'clone',
appendTo: "#droppable",
});
$("#droppable").droppable({
accept: "#draggable",
});
i++;
var $obj = ui.helper.clone().attr( 'data-name', 'newelementdropped' +i).draggable({
stop : function (event, ui) {
YOUR CODE
});
}
See this answer: Jquery draggable(), clone() to append div...Pls Fiddle my jsfiddle
Just re-initalize the plugin after you insert the element.
Something like:
$(".test").draggable("destroy").draggable();
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>
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>
our problem :
I've got a draggable thing outside an iframe, and a droppable target inside it. Here I've shown the iframe as containing a snippet of the HTML that is loaded by its src attribute.
so see code :
inner iframe page (inner_iframe.html):
<body style="cursor: auto;">
<div id="container">
</div>
</body>
main page :
<div id="main">
<iframe id="containeriframe" src="inner_iframe.html"></iframe>
</div>
<div id="container1">
<div class="drag" style="left: 20px;" id="lable"></div>
</div>
JavaScript code :
$("#containeriframe").load(function () {
var $this = $(this);
var contents = $this.contents();
// here, catch the droppable div and create a droppable widget
contents.find('#container').droppable({
iframeFix: true,
drop: function (event, ui) { alert('dropped'); }
});
});
$( "#lable" ).draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
iframeFix: true
});
now i use Jquery 1.8 and Jquery UI.
so i load page and try to drop in iframe div but no respond , so how to manage it.
please help me ....
Thanks
This works for me:
Main page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js""></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script>
$(function () {
$("iframe").load(function () {
var iframe = $(this).contents();
iframe.find('#iframe_container').droppable(
{
drop: function (event, ui) { alert('dropped'); }
});
});
$('#drag').draggable();
});
</script>
</head>
<body>
<iframe src="iframe.html"></iframe>
<div style="width:20px; height:20px; background-color: #808080" id="drag"></div>
</body>
</html>
iframe:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="iframe_container" style=" width: 40px; height: 40px; background-color: #0094ff">
</div>
</body>
</html>
Try this plugin http://maxazan.github.io/jquery-ui-droppable-iframe/
<!--jquery -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!--jquery UI -->
<script type="text/javascript" src="js/jquery-ui-1.11.4.custom.js"></script>
<!-- jquery-ui-droppable-iframe -->
<script type="text/javascript" src="jquery-ui-droppable-iframe.js"></script>
<!--Activate drag and drop zones -->
<script type="text/javascript">
$(function() {
//After frame loaded
$("#testframe").load(function() {
//Activate droppable zones
$(this).contents().find('.droppable').droppable({
drop: function(event, ui) {
//ACTION ON DROP HERE
}
});
});
//Activate draggable zones
$('.draggable').draggable({
iframeFix: true, //Core jquery ui params needs for fix iframe bug
iframeScroll: true //This param needs for activate iframeScroll
});
});
</script>
I have picked up this code(DragandDrop.jsp) from this page ::
http://jsfiddle.net/petersendidit/S4QgX/
I am getting the page like that only.But items are not draggable and i can't drop them to a particular shopping cart. Seems to me that i have to write an onload() j query function in order to accomplish that for my code in tags, but i don't know how to that. Or may be there's another error. I have put css code in the page only rather importing it as an external file. please help me out with the code. Thanks for the help.
DragandDrop.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
h1 { padding: .2em; margin: 0; }
#products { float:left; width:200px; height: 600px; margin-right: 20px; }
#products ul {list-style: disc; padding: 1em 0 1em 3em;}
.shoppingCart{ width: 200px; margin: 20px; float: left; }
/* style the list to maximize the droppable hitarea */
.shoppingCart ol { margin: 0; padding: 1em 0 1em 3em; list-style-type: decimal; }
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
$("#products li").draggable({
appendTo: "body",
helper: "clone"
});
$(".shoppingCart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
</script>
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">Product list</h1>
<div class="ui-widget-content">
<ul>
<li data-id="1"> product 1 </li>
<li data-id="2"> product 2 </li>
<li data-id="3"> product 3 </li>
<li data-id="4"> product 4 </li>
<li data-id="5"> product 5 </li>
</ul>
</div>
</div>
<div id="shoppingCart1" class="shoppingCart">
<h1 class="ui-widget-header">Shopping Cart 1</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
<div id="shoppingCart2" class="shoppingCart">
<h1 class="ui-widget-header">Shopping Cart 2</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
</body>
</html>
Put your javascript code in $(document).ready block. As it is now, when your javascript code executes none of the elements are rendered on the page yet, so jQuery has nothing to bind to. $(document).ready will execute only after the page has rendered so your products and shopping cart will be available to jQuery to make them draggable/droppable.
<script type="text/javascript">
$(document).ready(function() {
$("#products li").draggable({
appendTo: "body",
helper: "clone"
});
$(".shoppingCart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
});
</script>