I'm using jquery's drag and drop photo manager, and require some slightly altered functionality.
You can view the eg. in the link below.
http://jqueryui.com/droppable/#photo-manager
What I want to be able to do, is when you drag an image into the drop-zone, instead of fading from the original list, I want to add a class to it.
I can't quite figure out where I need to do this?
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
ui.draggable.addClass('my-new-thing');
var $list = $( "ul", $trash ).length ? $( "ul", $trash ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
ui.draggable.clone().append( recycle_icon ).appendTo( $list ).fadeIn();
}
});
I think you want this
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
ui.draggable.addClass('new1');
}
})
When your element is in drop-zone, you can catch the event with the drop event.
$( ".selector" ).droppable({
drop: function( event, ui ) {
// Add your class here
}
});
More information on http://api.jqueryui.com/droppable/#event-drop
Related
I'm using jQuery-ui draggable, droppable. My main container should only accept plugin-containers which also are droppables which accept plugins. Below is the code my code snippet:
$("#main").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".plugin-container",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$("<div></div>").html(ui.draggable.html()).appendTo(this).droppable({ accept: '.plugin', drop: function (event, ui) { $('<div></div>').html(ui.draggable.html()).appendTo(this); } }).sortable();
}
});
The problem is that when a plugin is dragged into the main container, I want to:
Hightlight Plugin containers that plugin can be dropped
If plugin is dropped in the main container show an error message
but the droppable over and drop methods only fire if the dragged item is acceptable and won't fire for unacceptable drags (in this case .plugin). what can I do here?
Here is the fiddle
I think I have found THE EXACT SOLUTION TO YOUR PROBLEM !!
Check out this FIDDLE
CODE:
$("#main").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
//accept: ".plugin-container",
drop: function( event, ui ) {
if(ui.draggable.hasClass('plugin'))
{
alert('This element cannot be dropped here !');
$(ui.draggable).draggable({ revert: true });
}
else if(ui.draggable.hasClass('plugin-container'))
{
//console.log('context = ');
//console.log(ui.draggable.context);
$( this ).find( ".placeholder" ).remove();
$("<div></div>").addClass('plugin-container')
.html(ui.draggable.html())
.appendTo(this)
.droppable({
accept: '.plugin',
greedy:true,//this will prevent the parent droppables from receiving the droppable object
drop: function (event, ui) {
$(ui.draggable).draggable({ revert: false });
$('<div></div>')
.addClass('plugin')
.html(ui.draggable.html())
.appendTo(this);
}
}).sortable();
}
}
});
$(".menu div").draggable({
appendTo: "body",
helper: "clone"
});
You can make all draggabbles acceptable and then in your over and drop methods filter the wanted/unwanted divs and show error message.
drop: function( event, ui ) {
var dropped = ui.draggable.attr('class');
if (dropped == ".plugin") {
// show alert
} else {
}
There is also the 'revert' option that you can use to revert a dragged element back to its original position.
I can drag and drop, it works very good. But at the destination place the ordered list does not work properly. It should look like a ordered-list not like a pile. The destination box should grow with new element, but it does not work too.
Where is my mistake? Here is the code: http://jsfiddle.net/QJ54x/
That's the jQuery-Code so far:
$( init );
function init () {
$('.draggable1').draggable ({
containment: "#ddSurvexFormDragDropArea",
scope: "d1",
stop: draggable1Stop,
helper: "clone",
});
$('#droppable1').droppable({
scope: "d1",
accept: ".draggable1",
hoverClass: "droppable1HoverClass",
drop: droppable1Drop,
});
}
function draggable1Stop(event,ui) {
// alert ('draggable1Stop');
// $(this).remove();
ui.helper.clone().appendTo($(this).parent());
$(this).remove();
}
function droppable1Drop (event, ui) {
}
OK, I got it, here is the answer (another simplified example):
http://jsfiddle.net/cKs5u/
That's the corresponding part:
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
})
given by example from jquery-api online.
I have been trying to put a Draggable element on Droppable element, by jquery ui, and i almost succeded as the code working halfly, if you move a little the elements on the droppable, they are changing their place, and i don't want it to, i want they will stay where they are, but if you drag them outside of the droppable area, they will come back to their natural place.
the code i've done:
HTML:
<div class="cart">
<div class="products on">1</div>
<div class="products on">2</div>
</div>
<div class="products">3</div>
<div class="products">4</div>
<div class="new"></div>
Jquery:
$(function() {
$(".products").draggable({
appendTo: "body",
revert : function(event, ui) {
if($(this).attr("class").split(' ')[1] == 'on') {
$(".new").append($(this)); $(this).removeClass("on"); return !event;
}else{
$(this).data("uiDraggable").originalPosition = {top : 0,left : 0}; return !event;
} },
start: function(event, ui) { ui.helper.data('dropped', false); },
stop: function(event, ui) {
if(!ui.helper.data('dropped')) {
$("#"+$(this).html()).remove();
}
}
});
$(".cart").droppable({
drop: function( event, ui ) {
var text = ui.draggable.html();
$(".cart").append('<div id="'+text+'">'+text+'</div>');
ui.draggable.data('dropped', true);
}
});
});
http://jsfiddle.net/yreKf/8/
just remove destroy draggable on drop event here is working jsfiddle
drop: function( event, ui ) {
var text = ui.draggable.html();
$(".cart").append('<div id="'+text+'">'+text+'</div>');
ui.draggable.data('dropped', true);
$(ui.draggable).draggable({
revert: "invalid"
});
}
This might be the answer you are looking for
http://jqueryui.com/droppable/#revert
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
Here is my code on Jsfiddle: http://jsfiddle.net/sachinprasad/753KX/1/.
Here is my jquery code:
$(function() {
$("#sortable").sortable({
revert : true
});
$(".draggable").draggable({
connectToSortable : "#sortable",
helper : "clone",
revert: function(valid) {
if(valid) {
//alert("Valid");
$("ul#sortable li").resizable();
$("#sortable").sortable({revert : true });
$("ul, li").disableSelection();
}
return !valid;
}
});
$("ul, li").disableSelection();
$("ul#sortable li").resizable({
});
/* $( "#sortable li" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" );
return false;
}
}); */
});
The droppable doesn't seem to be working as even if I'm comment the droppable, its functionalities remains same.
What I have to do is:
Make item1,item2 .... as drop containers where facebook or twitter items can be dropped but only one at a time.Eg If twitter is dropped it should not allow any other items to be dropped and even twitter.
Make the dropped items sortable and users can also resize the items.
Any help will be greatly appreciated.
I have a drag and drop example that reverts a draggable object back to it's original position when it is dropped in a droppable div.
My problem is that when revert is on valid on my draggable objects I am able to drag the objects to a different position on the page, My draggable objects only revert back when I drop them into the droppable div.
I want my draggable objects to revert back regardless of where on the page you drag them to?
I have tried this which works but does not work.
{
revert: 'vaild',
stop: function(){
$(this).draggable('option','revert','invalid');
}
My problem here is that my draggable objects revert but no not revert when I drop them into the droppable div.
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var dragElemId = ui.draggable[0].id;
var imgPath = $('#' + dragElemId).attr("des-image");
$( this )
.find( ".drop-image" ).removeAttr("src").attr("src",imgPath);
}
});
});
</script>
Setting the revert property to true will cause them to always revert.
$( "#draggable" ).draggable({
revert: true
});
$( "#draggable1" ).draggable({
revert: true
});
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
//ommited for brevity
}
});
Working Example: http://jsfiddle.net/yLuvv/