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
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>
I want to remove a dragged element, but it should only be removed when it doesn't have the class "nodrop".
here's my current code it removes all elements wheter i included an if function:
$(".löschen").droppable({
drop: function(event, ui) {
if (!$(this).hasClass("nodrop")){
ui.draggable.remove();
findTotal();
}
}});
I don't have any plan what I've done wrong...
You get the current drop container (.löschen) with $(this). With $(ui.draggable) you get the dropped element with class nodrop.
$(".draggable").draggable();
$(".löschen").droppable({
drop: function(event, ui) {
var $dropContainer = $(this);
var $dragContainer = $(ui.draggable)
console.log($dropContainer, $dragContainer);
if (!$dragContainer.hasClass("nodrop")){
$dragContainer.remove();
}
}});
.draggable {
width: 100px;
height: 100px;
}
.drop {
background-color: green;
}
.nodrop {
background-color: red;
}
.löschen {
width: 200px;
height: 200px;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="draggable nodrop">NO DROP</div>
<div class="draggable drop">DROP</div>
<div class="löschen">TRASH</div>
I wanted to drag and drop image onto another image.
I cannot figure it out.. I want to drag icons image, onto droppable briefcase and the icons will stay there.. my codes.. I want the icons image to be onto briefcase image not outside of briefcase image.
Javascript:
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function(event, ui) {
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.removeClass("draggable");
var image = this.src.split("/")[this.src.split("/").length - 1];
if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
alert(image + " dropped.");
} else {
alert(image + " not dropped.");
}
}
});
$("#briefcase").droppable({
drop: function(event, ui) {
if ($("#briefcase img").length == 0) {
$("#briefcase").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase").append(ui.draggable);
}
});
});
HTML:
<div id="dragIcons">
<img src="assets/img/gebiz.png">
<img src="assets/img/b2b.png">
</div>
<div id="briefcase">
<img width="600px" height="auto" src="assets/img/briefcase.svg">
</div>
CSS:
.draggable {
filter: alpha(opacity=100);
opacity: 1.0;
}
.dropped {
position: static !important;
}
#dragIcons {
border: 2px solid #ccc;
padding: 5px;
min-height: 100px;
width: 430px;
}
#briefcase {
border: 5px solid #ccc;
padding: 5px;
height: auto;
width: 600px;
margin-left: auto;
margin-right: auto;
}
Remove the <img> tag in the #briefcase div. Instead, make the background of the div as the image and make its position absolute.
Here's the JSFiddle - you'll have to fix the CSS positioning of the icons, but the main idea is there.
I am using jQueryUI Draggable and Resizable for re-size and drag of a div. It gives me some strange behavior like on re-size it jumps outside of container how can I fix it. Any help should be appreciated.
HTML:-
<div class="paper-area" id="paper_area"></div>
<div class="upload-logo drag">Upload Logo</div>
JS:-
$(".drag").draggable({
containment: ".paper-area",
start: function(e, ui) {
$(this).css({
// position: "relative",
});
},
stop: function(e, ui) {
containment: ".paper-area",
$(this).css({
// position: "relative",
});
},
}).resizable({
containment: ".paper-area",
start: function(e, ui) {
// alert($(".paper-area").width());
containment: ".paper-area",
$(this).css({
// position: "relative",
});
},
stop: function(e, ui) {
containment: ".paper-area",
$(this).css({
//position: "relative",
});
}
});
CSS:-
.paper-area {
border: 1px solid #E4E3E3;
height: 290px;
margin: 48px auto 0;
width: 400px;
}
.upload-logo {
background: none repeat scroll 0 0 #626262;
color: #7B7B7B;
height: 98px;
margin: 0 auto;
text-shadow: 1px 1px 2px #FFFFFF;
width: 99px;
}
JSFiddle
There were two major problems (see updated fiddle: http://jsfiddle.net/BPQQN/7/):
-the containment area did not actually contain the grey rectangle. To fix this, I changed the html to:
<div class="paper-area" id="paper_area">
<div class="upload-logo drag">Upload Logo</div>
</div>
-the grey rectangle jumped around on drag start because it had margin: 0 auto; Deleted the margin and it worked.
The current state of the fiddle is probably not what you were trying to achieve. What should be the final result?
http://jsfiddle.net/BPQQN/8/
html :
<div class="paper-area" id="paper_area">
<div class="upload-logo drag">Upload Logo</div>
</div>
css:
.upload-logo {
position:absolute;
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);
}