How to get container of draggable inside drop event? - javascript

I have an html like this:
<div id="container1">
<div class="dragme">drag me</div>
</div>
<div id="container2">
<div class="dragme">drag me</div>
</div>
<div id="droponme"></div>
$(".dragme").draggable();
$("#droponme").droppable({
accept: ".dragme",
drop: function(e, u) { alert( /* find id of the container here*/ ); };
});
I want to find the container of the draggable object on drop event handler. How can I do this?

$(".dragme").draggable();
$("#droponme").droppable({
accept: ".dragme",
drop: function(e, u) {
alert(u.draggable.parent().attr('id') );
// in your example: container1 or container2
}
});

It's another form to get droppable container:
$(".dragme").draggable();
$("#droponme").droppable({
accept: ".dragme",
drop: function(e, u) {
alert(e.toElement);
}
});

Related

jquery draggable on few divs

Picture:
<div id="grid-wrapper">
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
</div>
I want to change class on two divs when I drop my span, and remove draggable.
I have this:
$( ".dragandrop" ).draggable({ snap: "#grid" });
$("#grid").droppable({
drop: function( event, ui ) {
$( this )
.addClass( "droped" )
}
});
This code add me .droppable only on first div, and doesn't add class "droped", I can't do removing .draggable. Can you help me?
First off, be careful using the same id for multiple elements. It can cause really weird issues (see this post).
Second, make sure you add the draganddrop class to the appropriate elements that you want to, well, drag and drop.
And you want to removed the draggable on an element once you dropped it? I think what you want looks something like this:
$( ".dragandrop" ).draggable({
snap: ".dragandrop" ,
stop: function(event, ui){
$( this ).addClass( "droped" );
$( this ).draggable( 'disable' );
}
});
$(".dragandrop").droppable({});
div{
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="grid-wrapper">
<div id="grid1" style="background:orange;" class="dragandrop">a</div>
<div id="grid2" style="background:red;" class="dragandrop">b</div>
<div id="grid3" style="background:green;" class="dragandrop">c</div>
<div id="grid4" style="background:yellow;" class="dragandrop">d</div>
</div>
You may also want to add in some logic to keep the active div on top.

Jquery Ui draggable want to set Position for drop

Using Jquery UI draggable.
In which I am dragging a (#b1)thumbnail & appending a div.But i want to set drop area.Like if i drag my thumbnail in a .box(border box) then only append works & else not.I want to set such condition.
My code
$( "#b1" ).draggable({ revert: true });
$( ".box" ).droppable({
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
}
});
$( "#b1" ).draggable({
start: function(event, ui) {
console.log(event);
console.log(ui);
},
stop: function(event, ui) {
$(".box").append('<div id="box'+objArr.length+'" class="border" onclick="$(this).resizable();$(this).draggable();"><img src="close.png" alt="close" width="20" height="20" class="close" id=box"'+objArr.length+'" onclick="$(this).parent().hide();"> <textarea rows="2" class="txt" id="TextBox'+objArr.length+'" cols="2"></textarea></div>');
}
});
This is my fiddle code: http://jsfiddle.net/zha4v66u/2/
set droppable like
$(".box").droppable({
accept: "#b1",
drop: dropped,
scope: "drop",
})
function dropped(event, ui) {
$(this).append(ui.draggable);
$(ui.draggable).css({ "left": "0", "top": "0" });
}
}
http://api.jqueryui.com/droppable/#option-accept
jQuery('#droppable').droppable(
{
accept: '#draggable',
drop: function(event, ui)
{
ui.draggable.data('dropped', true);
// awesome code that works and handles successful drops...
}
});
jQuery('#draggable').draggable(
{
revert: false,
start: function(event, ui) {
ui.helper.data('dropped', false);
},
stop: function(event, ui)
{
alert('stop: dropped=' + ui.helper.data('dropped'));
// Check value of ui.helper.data('dropped') and handle accordingly...
}
});
You can try this using accept feature.
jQuery drag and drop - checking for a drop outside a droppable
Below solution. Hope this solves the issue.
Step 1: Html
<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>
Step 2: Jquery
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
// After drop done
}
});
});
</script>

jQuery-UI draggable/droppable Jumping

I'm not new to code here, but this is my first question on SO, so if my etiquette is off excuse me just this once. I've looked around for support on this, and it doesn't seem many people are running into this problem.
I'm playing with jQuery-UI for the dragging and dropping elements, and for the most part it's working fine. However when I drag something from a 'tabbed' div into a droppable area it jumps a couple hundred pixels below it. It's especially odd because I've got it set to revert it's position on an invalid drop, and that's working, but it ignores this rule on the first drop that makes it jump. I'm not sure if this is something in the CSS position style, or if I'm not setting my UI attributes correctly.
http://www.putoutsystems.com/jtest/
Hit the consumables tab > drag the item into the bin. You should see the behavior I'm describing. I'm using jQuery 1.10.2 and jQuery UI 1.10.4
This is all the code for the app:
<link href="css/pepper-grinder/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<style>
#potion { width: 24px; height: 24px; position:relative;}
#tabs { width: 500px; height: 100px;}
#droppable { width: 500px; height: 100px;}
.inventoryTab { height: 40px; }
</style>
<!-- libraries -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<!--functions -->
<script>
//functions
$(function() {
//Dragable Elements
$( ".draggable" ).draggable({ revert: "invalid"});
//Hover Text
$( document ).tooltip();
//droppable elements
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "FULL!" );
$(ui.draggable).appendTo($(this));
}
});
//Tab Interface
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<!-- Inventory tabs-->
<div id="tabs">
<ul>
<li>Equipment</li>
<li>Consumables</li>
<li>Items</li>
</ul>
<div id="tabs-1" class="inventoryTab" >
</div>
<div id="tabs-2" class="inventoryTab" >
<div id="potion" class="draggable">
<img src="sprites/potion.png" alt="potion" title="Minor Health Potion">
</div>
</div>
<div id="tabs-3" class="inventoryTab" >
</div>
</div>
<br>
<!-- The Bin --->
<h1>The BIN</h1>
<div id="droppable" class="ui-widget-header">
<p>Empty!</p>
</div>
UPDATE: I've come up with a bandaid solution that sets an exact position, that I suppose I could change using variables based on how many objects are in the bin. Check our this code for droppable event:
//droppable elements
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "FULL!" );
$(ui.draggable).appendTo($(this));
$(ui.draggable).css({
'top': '10px',
'left': '10px'
});
}
});
I'd prefer it if the object got the mouse position when it was dropped, but that's where my jQuery is failing me right now. I'll keep looking.
JSFIDDLE
It seems like you don't need this line $(ui.draggable).appendTo($(this));
//functions
$(function () {
//Dragable Elements
$(".draggable").draggable({
revert: "invalid"
});
//Hover Text
$(document).tooltip();
//droppable elements
$("#droppable").droppable({
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("FULL!");
//$(ui.draggable).appendTo($(this)); // comment this out
}
});
//Tab Interface
$("#tabs").tabs();
});
JSFIDDLE DEMO

Drag and drop the one div again and again to the next divs

My HTML file is
<div id="dragAnwr" ></div>
<div id="dropimg" > </div>
<div id="dropAnswr1" class="dropbox" ></div>
<div id="dropAnswr2" class="dropbox" ></div>
<div id="dropAnswr3" class="dropbox" ></div>
<div id="dropAnswr4" class="dropbox" ></div>
and My jQuery File is
$( "#dragAnwr" ).draggable({ revert: "invalid",cursor: 'move',containment: "parent", });
$( "#dropAnswr1" ).add( "#dropAnswr2").add( "#dropAnswr3").add( "#dropAnswr3").add( "#dropAnswr4").droppable({
drop: function( event, ui ) {
hoverClass: "drop-hover"
}
});
here i wanna drag the dragAnwr Div into the following Divs
<div id="dropAnswr1" class="dropbox" ></div>
<div id="dropAnswr2" class="dropbox" ></div>
<div id="dropAnswr3" class="dropbox" ></div>
<div id="dropAnswr4" class="dropbox" ></div>
Using my jQuery Code only the one time the dragAnwr div drop into any of other div. here i wanna drag and drop the dragAnwr div again and again to the next divs. so please give a perfect solution. Thanks
I'm not sure what you really want. But I think you want that user may change the answer after dropping the answer flag.
So here is my solution
// HTML
<div id="dragAnwr" >' ' is Answer </div>
<div id="dropAnswr1" class="dropbox" >A</div>
<div id="dropAnswr2" class="dropbox" >B</div>
<div id="dropAnswr3" class="dropbox" >C</div>
<div id="dropAnswr4" class="dropbox" >D</div>
You can add draggable event to elements by select their class and set call back to the drop function
// js
$( "#dragAnwr" ).draggable({
revert: "invalid",
cursor: 'move',
containment: "parent"
});
$( ".dropbox" ).droppable({
drop: function( event, ui ) {
// remove flag class
$(this).siblings().removeClass('selected');
// add class to the dropped element
$(this).addClass('selected');
},
hoverClass: "drop-hover"
});
And some CSS for more info
// css
div {
border-style:solid;
border-width:5px;
}
.selected {
color: red;
}
Hope this help! You can take a look at its fiddle http://jsfiddle.net/DKUg9/5/

Draggable on nested Droppable

following this example.
<div id="containers">
<div class="frame">
<div class="popup">Popup</div>
<div class="object">Object 1</div>
<div class="object">Object 2</div>
</div>
</div>
I want each object to be draggable to popup.
once inside the popup, have the possibility to draggable again for the frame
The problem is the second time I do it.
When i try draggable object to droppable popup, nothing happenz..
Any Ideas?
here my code.
http://jsfiddle.net/PtLLf/49/
The reason is because by default, when an element is dropped on nested droppables, each droppable will receive the element.
So in your case the drop of the inner is fired, but the outer div is fired too and get the element in itself.
You can set greedy option to true, any parent droppables will not receive the element. The drop event will still bubble normally, but the event.target can be checked to see which droppable received the draggable element.
Ref: http://api.jqueryui.com/droppable/#option-greedy
Code:
$('#containers .frame .popup').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: '.object',
greedy: true ,
drop: function (event, ui) {
$(ui.draggable).addClass("insidePopup");
ui.draggable.detach().appendTo($(this));
}
});
$('#containers .frame').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: '.insidePopup',
greedy: true ,
drop: function (event, ui) {
ui.draggable.detach().appendTo($(this));
$(ui.draggable).removeClass("insidePopup");
}
});
$('#containers .frame .object').draggable({
helper: 'clone',
containment: "document"
});
Demo: http://jsfiddle.net/IrvinDominin/dVFgn/

Categories

Resources