I have 2 draggable div's in a html document and I have 1 droppable div next to the 2 draggable one's.
When you drag one of the draggable div's onto the droppable div the droppable div shows some text and the draggable div reverts back to where is was.
My question is how can I change the text in the droppable div according to the which draggable div I have dropped onto the droppable div?
I hope this makes sense, below is my code.
Many thanks
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Revert draggable position</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#draggable, #draggable1 { 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>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop me here</p>
</div>
</body>
</html>
Using the example you provided, try this:
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( ui.draggable[0].id );
}
});
});
DEMO:
http://jsfiddle.net/dirtyd77/SLGdE/23/
You can get the id of the draggable element (the dragged element) from the ui object like so:
drop: function( event, ui ) {
ui.draggable[0].id
}
Fiddle
Your full drop callback would look like this in your example:
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped! " + ui.draggable[0].id);
}
Related
I have a bunch of DIV's that I'm using to allow a user to drop other DIV's onto. This will be a "Fill in the Blank" kinda thing. With the droppable being the blank in the sentence and the droppable being the answers they can choose from.
The issue I'm having at the minute is currently when they drop their answer div onto the droppable div, my function removes the draggable from the draggable element, but the droppable element remains able to have more divs dropped onto it.
I was wondering how can I get this to disable the droppable div, so that once an "answer" is dropped onto it's the only thing that can be.
Here's what my function looks like currently:
function handleCardDropOne(event, ui) {
var cardValue = ui.draggable.attr('id');
ui.draggable('disable');
$(this).droppable('disable');
ui.draggable.position({ of: $(this),
my: 'left top',
at: 'left top'});
ui.draggable.draggable('option', 'revert', false);
};
$(function() {
//Drag 1
$( "#draggable" )
.draggable({ snap: "#snap-one", snapMode: "inner", snapTolerance: 5 });
//Drag 2
$( "#draggable2" )
.draggable({ snap: "#snap-two", snapMode: "inner", snapTolerance: 5 });
//Drop 1
$( "#snap-one" ).droppable({
accept: "#draggable",
drop: function( event, ui ) {
var top = $('#draggable').css('top')
,left = $('#draggable').css('left');
if (top === '-107px'){
if(left === '0px'){
$(ui.draggable).draggable('disable');
if ($('#draggable').hasClass('ui-draggable-disabled')){
alert('hello');
}
}
}
}
});
//Drop 2
$( "#snap-two" ).droppable({
accept: "#draggable2",
drop: function( event, ui ) {
var top = $('#draggable2').css('top')
,left = $('#draggable2').css('left');
if (top === '-107px'){
if(left === '0px'){
$(ui.draggable).draggable('disable');
}
}
}
});
});
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.snap {
width: 80px;
height: 80px;
margin: 0 10px 25px 0;
float:left;
}
.ui-state-highlight{
background-color:yellow;
color:#000;
}
<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>
<div id="snap-one" class="snap ui-widget-header" style="background: #ffc36a;">AAA</div>
<div id="snap-two" class="snap ui-widget-header" style="background: #ffc36a;">BBB</div>
<div class="demo">
<br clear="both" />
<div id="draggable" class="draggable ui-widget-content" style="background: #a7fbdf;">
<p>AAA</p>
</div>
<div id="draggable2" class="draggable ui-widget-content" style="background: #a7fbdf;">
<p>BBB</p>
</div>
</div>
$(".target").droppable({
connectWith: ".connected",
drop: function (event, ui) {
var targetId = event.target.id;//--> id of the target (where elements will be dropped into)
var orderId;//--> id of the dragged element (NOT the targetId)
if ($(this).hasClass("source connected")) {
orderId = sourceElementSo;
}
else {
orderId = $(ui.draggable).attr("id");
};
i've tried ui.item and ui.draggable, but no success
PS: Newbie :)
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
connectWith: ".connected",
drop: function( event, ui ) {
var targetId = event.target.id;//--> id of the target (where elements will be dropped into)
var orderId;//--> id of the dragged element (NOT the targetId)
if (ui.draggable.hasClass("connected")) {
console.log("ok");
orderId = sourceElementSo;
}
else {
orderId = $(ui.draggable).attr("id");
};
}
});
});
#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; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content connected">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
I am trying to create two panels using jQuery UI layout plugin, and then being able to drag & drop images between the two panels, on the right, the dropped image should maintain the position where it was dropped (and be able to drag it and keep the position anywhere on that right panel), then when drag & dropping from right to left panel the image should align like the originals.
This is the code im working on https://jsfiddle.net/Lwbka9ww/4/:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Layout Container</title>
<link type="text/css" rel="stylesheet" href="external/layout/layout-default.css" />
<style type="text/css">
html, body {
background: #666;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small */
}
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 1200px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
</style>
<script type="text/javascript" src="external/jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="external/layout/jquery.layout.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#container').layout({
west: { size: "20%" }
});
var $left = $( ".ui-layout-west" ), $right = $( ".ui-layout-center" );
$( ".ui-layout-west .drag" ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "#container",
cursor: "move",
helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
});
$right.droppable({
accept: ".ui-layout-west .drag",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
$(".accept").append(ui.draggable);
$(ui.draggable).css("position", "absolute");
}
});
/*$( ".ui-layout-center .drag" ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "#container",
cursor: "move",
helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
});
//$( "li", $('.ui-layout-center') ).draggable();
function imageDropped( $item ) {
$item.fadeOut('fast', function() {
var $list = $( "ul", $right ).length ? $( "ul", $right ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo($right);
$item.appendTo( $list ).fadeIn('fast');
});
}*/
});
</script>
<style>
.drag {
cursor: move;
clear: both;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="pane ui-layout-center">
<div class="accept"></div>
</div>
<div class="pane ui-layout-west">
<div class="drag">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLEBYPEhAQDRsNFQ8WIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6IyszODM4NzQtLisBCgoKDQwOFw8PGjclHyQ3ODcsLDc3LDcsLCw0LCwrNywsKywuKywrLDcrNysrKysrKysrKyssLCsrKyssKysrK//AABEIADwAPAMBIgACEQEDEQH/xAAaAAADAQEBAQAAAAAAAAAAAAADBAUGAgEH/8QAMxAAAQMDAgMGBAUFAAAAAAAAAQIDEQAEIQUSEzFBBiJRYXGBIzKxwRVSkaHwFGJjcvH/xAAZAQACAwEAAAAAAAAAAAAAAAABAgADBQT/xAAgEQACAgICAgMAAAAAAAAAAAAAAQIRAxITMSFRBBRB/9oADAMBAAIRAxEAPwAbNmu82tqPDbRGIO5ccsz9PKm+K2ygIBMIH+0n8s0y4Qi3Q8pKdyjEyTCRzgx60mu4ZO5S1fERK0tgBRSfzEePj1EjrWzsombTY4y2pQClCJAx59aJwqlp1+2t7dKY4j3IpGAD6+Y/fnyrm37VW75RtYUkOQUzmByM/YUn3MSpWTil2VuDXnB8qaS6wptLocSEK5Enb/yhruWR8nf9Dj9aueaC8tgWOT6QEs15wfKnNOUxqFwi3bdDTrh2jeOR9Ote2iVPs8RSUpO5QgT0JH2qLNFukwvFJdoyq9Rc4oaQ+kW20N71Snu9dsT1nP6GmE6nplsw6tK0uXC0wn4Z7p6EgkTyEnMmoT3ZnWFMpS01cvKSDHdCJPgciPUUBvsj2lTBNskbgAd1wiE+OAryGKwH8uck2jtWFE3UX9lwuFLB3Ak4gT4n3NJLu30vpDM7k9E972qvd9ldUbuW3bhyYzySoDwEgn6QMZrxq0TbWPFVx27jjltTaWFDe3tBKiYHMkgZ6cq5oqN9llI0Wh6nqSrVFmli3ULgb1EthawkK2nmMZmEzyPnT+gMXurai5ZsOBtLLhDh4YKggKKSoePIGOWakaVrDyUtotbpTTSG7gRxSiVjKRBjOBHXNB0ztOdN7TtXC0lttx075UUwgnMnqPLl1q3kp0PS/C1qVi8zqNwyzdp4La4DqylW4YyB16043dIaTsbuwhIJwlwczkmtIdF0fXrGz1By0Qwu6PHWULO4nwJBznniDUDtXoDH4uo2ejKcZKEwWypKRjpBq7kpeBaPnuma7ePtpQLcKUmExvCYAxk1Yt7u6d+azSAf8gM+lYBu6uFOQxLqlEY2Tu9o9KrN37wILrYG0ZBBUE9P54VwZMPoQ27bjpg7EgjpumP2plK8d4EH0NYpGrrBG19iR/Yr251QRrD6DDrlsoYgBYBI9M1RxSQbNGtLSxC2woeaQr9opdzTdOeUC5YsqUORLY+tTW9bMgFrcD1BKp94pn8SbIG4lKsY2kn6UEpIljStPsS2ho2qNjY2pAnujnjPjJoS9I01yCpo4ECFKwP1rpL2+YX4D5TM0QboxtIpt5ew7tGUbZeBAdtuIgKkEEpJ9Rn6U0xauNugpCuGobY3/KPYU8lwnBAPtTLcqMEnBileQFE620ptq4U4E7t35hO30I+4ozukW7m5TXw1K6bRk9ckY9qeUIRIJn1rlszM+Jo7MOpPTpCG1DYp0Dr3yM+uOVMIsJIi4V495wrmm0ErQdxoavhqOzEJn3qW2Cgf9MW3Mvr2icSaZTs2jBV5wK4BK8qzQXEgEfzrUJR//9k=" />
</div>
<div class="drag">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKDplYgDLBnlw0jBK06LriNY4eTqQtsf25U5VV95zAJBB9EavVhQ" />
</div>
<div class="drag">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-uqB0D8Xnjcao1kZ0W2P-uftmFxJlq6fTATe0YCJX3tdFaL8H" />
</div>
</div>
</div>
</body>
</html>
My main problem is keeping the initial position and maintaining drag changes on the left panel, I haven't worked on right to left drag & drop yet.
When you run this code there will be a box "Drag me Down", I need to drag it down to make another copy (each time I drag it) of same box without effecting the original box.
What changes should I make in my code to get the desired result as described above.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
revert: "true",
helper:"clone"
});
$( "#sortable" ).draggable({
//connectToSortable: "#sortable",
helper: "clone",
revert: "valid"
//var dra = jQuery.extend({}, draggable)
});
//$( "ul, li" ).disableSelection();
});
</script>
</head>
<body>
<ul>
<li id="sortable" class="ui-state-highlight">Drag me down</li>
</ul>
</body>
</html>
You can use jQuery .clone() function to achieve what you want.
Changed code
$(function() {
$( "#sortable" ).sortable({
revert: "true",
helper:"clone"
});
$( "#sortable" ).draggable({
//connectToSortable: "#sortable",
helper: "clone",
revert: "valid",
stop:function(){
$(this).clone().appendTo("body");
}
//var dra = jQuery.extend({}, draggable)
});
//$( "ul, li" ).disableSelection();
});
FIDDLE
I followed the jquery ui draggable and droppable to try to show 3 divs in a specific area.
Here is the code:
--CSS:
#content-1 { width: 200px; height: 100px; border: 1px solid red; display: none; }
#content-2 { width: 200px; height: 100px; border: 1px solid red; display: none; }
#content-3 { width: 200px; height: 100px; border: 1px solid red; display: none; }
--js:
$(function() {
$("#li-1").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
$("#content-1").show();
}
});
$("#li-2").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
$("#content-2").show();
}
});
$("#li-3").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
$("#content-3").show();
}
});
});
--HTML:
<div id="products">
<div id="catalog">
<div>
<ul>
<li id="li-1">dashboard-1</li>
<li id="li-2">dashboard2</li>
<li id="li-3">dashboard3</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<div class="ui-widget-content">
<div id="content-1"></div>
<div id="content-2"></div>
<div id="content-3"></div>
</div>
</div>
The result is it just can show only one div. What is the bug in this code?
Thanks in advance!
I took the nuisance of putting your code into http://jsbin.com to see what's happening out there. Next time please care to do it yourself.
Your problem is that you're defining the same function .droppable to the same element .ui-widget-content. So naturally you're rewriting the definition of the same function three times and only the last definition is working.
Here's how you want it to be done:
$(function() {
$("#li-1").draggable({
appendTo: "body",
helper: "clone"
});
$("#li-2").draggable({
appendTo: "body",
helper: "clone"
});
$("#li-3").draggable({
appendTo: "body",
helper: "clone"
});
$(".ui-widget-content").droppable({
drop: function(event, ui) {
// Retrieving the id of the element being dragged
var element = ui.draggable.attr('id');
if (element == "li-1") {
$("#content-1").show();
} else if (element == "li-2") {
$("#content-2").show();
} else if (element == "li-3") {
$("#content-3").show();
}
}
});
});
Demo: http://jsbin.com/ozixur/3/edit