Draggable on nested Droppable - javascript

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/

Related

How can I make draggable elements droppable instead of appending?

I have a simple drag n drop it is working fine as I expected
but,
Problem:
The only problem is the elements are appending
What I want:
I don't want to append the elements I just want that when I drag n drop the element
they appear as normally happen.
My Code:
$( "#editorDesignView" ).droppable({
accept: '.textTemplate',
drop: function( event, ui ) {
var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">'+ui.draggable.text()+'.</p></div>';
$(html).appendTo(this).hide().slideDown();
}
});
Here is my fiddle.
UPDATE:
I don't want to remove or want the same element as in left side. I just want that when I drop the element I can drop it anywhere
UPDATED FIDDLE:
Fiddle. Please check the console for the result. I want the result to be printed on droppable are without appending it.
you want a same representation on right column, as in left. And you can drop in anywhere at right column.
$(function(){
$(".textTemplate").draggable({
helper: "clone",
zIndex: 2500,
});
$( "#editorDesignView" ).droppable({
accept: '.textTemplate',
drop: function( event, ui ) {
console.log(ui.draggable.text(), event, ui);
var html = '<div>'+ui.draggable.text()+'</div>';
$(html).appendTo(this).hide().slideDown();
}
});
});
Here is my fiddle

Change the cursor to a crosshair when a button is dragged

Hello I need to turn the cursor into a crosshair while the user drags a button. The code below is not working:
$("button").draggable('cursor','crosshair');
To achieve this you can use cursor property of the draggable library, like this:
$("#draggable").draggable({
cursor: 'crosshair'
});
Alternatively, if you want to set a custom cursor through CSS you would need to use the start and end events of the jQuery draggable library to change the CSS cursor property of the ui.helper. Try this:
$("#draggable").draggable({
start: function(e, ui) {
ui.helper.addClass('dragging');
},
stop: function(e, ui) {
ui.helper.removeClass('dragging');
}
});
.dragging { cursor: url('http://i.imgur.com/6r4pI7U.png'), crosshair; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="draggable">
<p>Drag me</p>
</div>
From the jQuery UI docs https://api.jqueryui.com/draggable/
$( ".selector" ).draggable({
cursor: "crosshair"
});
Or if it is already initialized
$( ".selector" ).draggable( "option", "cursor", "crosshair" );
See here https://jsfiddle.net/W4Km8/9844/

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 draggable and droppable, switch to originalPosition another draggable

I'm working with Jquery UI draggable and droppable.
I have a container that accepts all the divs of the .category1 class, and what I have to do is:
If I put a div into the container that already has another div, revert the old div back to the
original position.
This is the code I have:
$(document).ready(function () {
$(function () {
$("#Part1").draggable({ revert: "invalid", snap: "#Part1Container", snapMode: "inner"
});
$("#Part1Container").droppable({
accept: ".category1",
drop: function (event, ui) {
//Some other logic
}
}
});
And the Html
<div id="Part1" class="ui-widget-content category1"></div>
<div id="Part2" class="ui-widget-content category1"></div>
I want the Part1 to be back to the original position if I insert Part2 in the container, and viceversa. And this has to work for n divs of the same class.
Any suggestions?
Tnx in advance :)
I solved it by assigning it a class when it goes into the container the first time, and then delete it when moving another div
$(".inCategory2").animate({
top: 0,
left: 0
}).removeClass("inCategory2");
ui.draggable.addClass("inCategory2");

How to get container of draggable inside drop event?

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);
}
});

Categories

Resources