We Keep Coding

drag and drop get ids of multiple image in droppable

I'm new to jquery, there is no question on this, I wanted my submit button able to get ids of multiple images in droppable, anyone can help? please help me or guide me along... I need to get the ids of the image that is only dragged inside the droppable and when submit button is pressed.. Display the image that is only inside droppable..
jsFiddle
https://jsfiddle.net/xInfinityMing/azvvhxvL/
JavaScript
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
cursor: "move",
cursorAt: {
top: 56,
left: 56
},
drag: function(event, ui) {
ui.helper.removeClass("end-draggable");
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.addClass("end-draggable");
ui.helper.removeClass("draggable");
}
});
$("#briefcase-full").droppable({
greedy: true,
tolerance: 'touch',
drop: function(event, ui) {
var id = ui.draggable.attr("id");
alert(id);
if ($("#briefcase").length == 0) {
$("#briefcase-droppable").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase-droppable").append(ui.draggable);
}
});
});

Basically, all the dragged element will go inside the droppable. so you can use children to check every elements.
$("#briefcase-droppable").children(".icons").each(function() {
var icon_id= $(this).attr("id");
});
JSFiddle : Link
I suggest you to use class instead of using img element to attach draggable event.

Draggable connected to sortable

I want to be able to drag items from one Infragistics DataGrid to another, while the items in the Destination grid are also sortable.
Unfortunately, I cannot use jsfiddle because I cannot use the infragistics controls there.
$("[id*=sourceGrid] [id*=dataTbl] tbody tr").draggable({
helper: "clone",
revert: "invalid",
connectToSortable: '[id*=destination]'
});
$("[id*=destinationGrid]").sortable({
cursor: 'move',
helper: fixHelperModified,
revert: true,
items: "[id*=container] [id*=dataTbl] tbody tr:not(.placeholder)",
receive: function (event, ui) {
var grid = $IG.WebDataGrid.find("destinationGrid");
$sentence = $(ui.item).find("td").eq(0).html();
var row = new Array(Math.floor((Math.random() * 100) + 1), $sentence, $order);
grid.get_rows().add(row);
}
});
The problem is: When I drop items from the sourceGrid to the destinationGrid, I don't want the draggable to be placed into the new Grid - I only want to use the receive function to create a new row in the grid with the values from the draggable element. Right now, I get both - the newly created gridRow and the dropped item. How can I prevent that?

You can catch the copied item in the beforeStop event.
var newItem;
$(".list").sortable({
connectWith: ".list",
beforeStop: function (event, ui) {
newItem = ui.item;
},
receive: function(event,ui) {
$(newItem).doSomething();
}
});​
Reference and credit to this answer: https://stackoverflow.com/a/5864644/3523694

jQuery getting id of the element which is sortable

I got some div's which are sortable etc.. But they got all the same classes, so if I drag one, all the contents of the div's are hiding. I want to get 'id' of the div i'm dragging, and put it into hide and show function.
It should be like this..
jQuery code:
$("#column-right").sortable({
connectWith: ".sort",
handle: ".title",
placeholder: "salih",
cursor: 'move',
revert: 'invalid',
start: function() {
.click(function() { // I know it is wrong but it should be like this
var id = $(this).attr('id')
}
$('id').hide();
},
stop: function() {
.click(function() { // same
var id = $(this).attr('id')
}
$('id').show();
}
});
EDIT: Example my problem: fiddle

Please let me know if this is something you were looking for:
JavaScript Code
$("#column-left, #column-middle, #column-right").sortable({
connectWith: ".sort",
handle: ".title",
placeholder: "salih",
cursor: 'move',
revert: 'invalid',
start: function() {
$(this).find('.contents').hide();
},
stop: function() {
$(this).find('.contents').show();
}
});
$(".sort").disableSelection();
In general, $(this).find('.contents') will be exactly the child element (content) which you are dragging.
Also, I have merged your 3 identical methods into 1 avoiding duplicates and any mess in the code.

How to make draggable revert if dropped in the wrong place

The draggables in my drag and drop game should only be able to be dropped in the designated area highlighted by the css.
$('.drag').draggable({
helper: 'clone',
snap: '.drop',
grid: [60, 60],
revert: 'invalid'
});
$('.drop').droppable ({
drop: function(event, ui) {
word = $(this).data('word');
}
});
The CSS style is called .showword, and the click event that triggers it is called "#picknext".
Any ideas how I would get the draggable to revert if it wasn't dropped in the styled area?
Something like this...
$('#picknext').click({
drop: function(event, ui) {
word = $(this).data('word');
}
});

Here is something that should get you started.
http://jqueryui.com/demos/droppable/#revert

Rather than having a function for your revert property you want to set it to invalid as discussed in that options help: http://docs.jquery.com/UI/Draggable#option-revert

jQuery UI: Drag and clone from original div, but keep clones

I have a div, which has jQuery UI Draggable applied. What I want to do, is click and drag that, and create a clone that is kept in the dom and not removed when dropped.
Think of a deck of cards, my box element is the deck, and I want to pull cards/divs off that deck and have them laying around my page, but they would be clones of the original div. I just want to make sure that you cannot create another clone of one of the cloned divs.
I have used the following, which didn't work like I wanted:
$(".box").draggable({
axis: 'y',
containment: 'html',
start: function(event, ui) {
$(this).clone().appendTo('body');
}
});
I figured out my solution:
$(".box-clone").live('mouseover', function() {
$(this).draggable({
axis: 'y',
containment: 'html'
});
});
$(".box").draggable({
axis: 'y',
containment: 'html',
helper: 'clone'
stop: function(event, ui) {
$(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
}
});

Here is what I finally did that worked:
$(".box-clone").live('mouseover', function() {
$(this).draggable({
axis: 'y',
containment: 'html'
});
});
$(".box").draggable({
axis: 'y',
containment: 'html',
helper: 'clone',
stop: function(event, ui) {
$(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
}
});

If you're tring to move elements (say <li/>) from a #source <ul/> to a #destination <ul/>, and you'd like them to clone (as opposed to move), and still be sortable on the right, I found this solution:
$(function() {
$("#source li").draggable({
connectToSortable: '#destination',
helper: 'clone'
})
$("#destination").sortable();
});
I know it seems ultra simple, but it worked for me! :)

Here was his solution:
$(".box-clone").live('mouseover', function() {
$(this).draggable({
axis: 'y',
containment: 'html'
});
});
$(".box").draggable({
axis: 'y',
containment: 'html',
helper: 'clone'
stop: function(event, ui) {
$(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
}
});

Here is how I got it working:
PS: 'marker' is the object to drag and 'map' is the destination container.
$(document).ready(function() {
//source flag whether the drag is on the marker tool template
var template = 0;
//variable index
var j = 0;
$(".marker").draggable({
helper: 'clone',
snap: '.map',
start: function(event, ui) {
//set the marker tool template
template = 1;
}
});
$(".map").droppable({
accept: ".marker",
drop: function(event, ui) {
$(this).find('.map').remove();
var item = $(ui.helper);
var objectid = item.attr('id');
//if the drag is on the marker tool template
if (template == 1) {
var cloned = $(item.clone());
cloned.attr('id', 'marker' + j++);
objectid = cloned.attr('id');
cloned.draggable({
containment: '.map',
cursor: 'move',
snap: '.map',
start: function(event, ui) {
//Reset the drag source flag
template = 0;
}
});
cloned.bind("contextmenu", function(e) {
cloned.remove();
return false;
});
$(this).append(cloned);
}
i++;
var offsetXPos = parseInt(ui.offset.left - $(this).offset().left);
var offsetYPos = parseInt(ui.offset.top - $(this).offset().top);
alert("Dragged " + objectid + " to (" + offsetXPos + "," + offsetYPos + ")");
}
});
});