I've got multiple drag and drops (jquery-ui). In separated div's. When I drag the draggable and drop it outside the droppable and then drag it again and drop it on the droppable it doesn't give feedback ( like text or alert) only if you drop it in one go. It does keep snapping to the drop area.
$(function() {
$( "#eeneen.drag" ).draggable({ snap: ".drop1", snapMode: "inner"});
$( ".drop1" ).droppable({
accept: "#eeneen.drag",
drop: function( event, ui ) {
$( this )
.addClass("goed")
.find( "p" )
.html( "Correct" );
alert ("correct");
}
});
});
this is repeated for every drag and drop. For some reason it would only give the visual feedback of the last function that's why I made multiple drop classes.
edit:
without the .addClass and .find still same problem.
any ideas?
Final edit. everything Works.
$(function() {
$( "#eendrie.drag" ).draggable({ snap: ".drop3", snapMode: "inner"});
$( ".drop3" ).droppable({
accept: "#eendrie.drag",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.find( "p" )
$("#goed").toggle().hide(2000);
}
});
});
So it has an extra div that shows and hides after a succesfull drop.
Also I defined the height and width of the .drag.ui-draggable. I guess that did it.
Related
I'm trying to create a situation where it is possible to drag and clone a div inside another div multiple times, this div in the specific container has tot be sortable with the other ones.
$(function() {
$( ".drag" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".day " ).droppable({
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "" );
if($(ui.draggable).hasClass('draggable-source'))
$( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');
else
$( ui.draggable ).appendTo( this );
console.log(this.id)
}
}).sortable({
items: "div",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
This is working in this fiddle:
http://jsfiddle.net/mfUCe/
This is where i got stuck:
I want to be able to drag the 2 divs in to the divs that are already inside of the droppable containers.
it would be great if anybody could help me
I'm beginer to js and jquery and I need a little help if someone can help me...
What I want to do?
I want to drag div from sidebar to table. In sidebar div must be only draggable to table. When I drag div to table, there in table, div must be resizable and draggable again.
Photo:
I was try with this code but dont work well:
$(function() {
$( ".draggable" ).resizable();
$( ".draggable" ).draggable({revert: 'invalid', helper:'clone', snap: "#drop_here td", opacity: 0.7});
$( "#drop_here td" ).droppable({
accept: '.draggable',
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped!" );
}
});
});
DEMO and SOURCE code: http://jsbin.com/erofot/17/edit | http://jsbin.com/erofot/17
Here is how you could do it then: (replace what you have in jsbin with this code)
jsbin
$(function() {
//$( ".draggable" ).resizable();
$( ".draggable" ).draggable({
revert: 'invalid',
helper:"clone",
snap: "#drop_here td",
opacity: 0.7
});
$( "#drop_here td" ).droppable({
// accept only from left div,
// this is necessary to prevent clones duplicating inside droppable
accept: '#left .draggable',
drop: function( event, ui ) {
// 4 append clone to droppable
$( this ).append(
// 1 clone draggable helper
$(ui.helper).clone()
// 2 make the clone draggable
.draggable({containment:"parent"})
// 3 make the clone resizable
.resizable());
}
});
});
I've just started using jQuery UI to drag divs into a columns in a table. I have a couple different draggable divs with different background-colors and text inside them, and I need them to be able to dragged up to the drop area as a clone. This worked fine by using jQuery UI's example shopping cart code, but I've edited it so the whole object is dragged instead of just the text, but this then eliminates the clone functionality for some reason, even though I have helper:clone.
Here is my code:
<script>
$(function() {
$( "ul li" ).draggable({
appendTo: "body",
helper: "clone"});
$( ".day #drag" ).draggable({
appendTo: "body"});
$( ".day" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "ui-state-highlight" );
$( ui.draggable ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
Example column:
<td>
<div id="monday" class="day monday ui-widget-content"></div>
</td>
Draggable element:
<li><div style="background-color:#<?=$bgColor?>;color:<?=$textColor?>;" id="drag" class="<?=$subject?>"><?=$row['name']?></div></li>
It's essentially a timetable setup tool. Thank you for the help
Here is a jsFiddle for reference: http://jsfiddle.net/x5T4h/
Not sure that it is exactly what you want, but here is a good start for your : http://jsfiddle.net/x5T4h/2/
Basically, I removed the second draggable object declaration, and I added clone function to duplicate your element inside drop event $( ui.draggable ).clone().appendTo( this );
$(function() {
$( "ul li" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".day" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( ui.draggable ).clone().appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
Hey I am using Jquery draggable droppable with table I have initialize both and its working, but the problem is the droppable area is table and the drop item is in div when I try to drop the item it show's below the table, I want the row Id on which it is placed but instead I am getting the whole table
Following are the code
JavaScript code for table
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable" ).droppable({
drop: function(event, ui) {
console.log($(this).find('tr.pen'))
$(this).append($(ui.draggable));
}
});
});
The table code is very big let me know if you can help I will happy to send you the code
I am open to any suggestion
Thank you .
If you want to drop the draggable on individual rows, then don't instantiate the droppable on the whole table but rather on the <tr>s of the table. Check if this code works for you:
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable tr" ).droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
});
I have modules of different sizes, I want the placeholder to be of the same size of the module being dragged, this is what I have figured out so far...
$( "#col1, #col2, #col3" ).sortable({
connectWith: ".col",
start: function(event, ui) {
var type = ui.item.hasClass("double") ? " double": "";
},
placeholder: "module drop" + type
}).disableSelection();
My problem is that I'm trying to use var "type" outside the scope of start, but I can't figure any other way of doing this.
If anyone wants to play around with the code, I've set up a fiddle here:
http://jsfiddle.net/TfcQq/
According to jquery ui documentation ( http://jqueryui.com/demos/sortable/#placeholder ), there is a setter for placeholder.
Be careful with spaces in the value, looks like it is a css class.
So you can try :
$( "#col1, #col2, #col3" ).sortable({
connectWith: '.col'
}).disableSelection();
$(".module").mouseover(function(){
$( "#col1, #col2, #col3" ).sortable( "option", "placeholder", 'drop-single' );
});
$(".module.double").mouseover(function(){
$( "#col1, #col2, #col3" ).sortable( "option", "placeholder", 'drop-double' );
});