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.

How to make draggable element invisible while it reverting?

I have dragable element in my html. and jQuery is like this
$( ".block-33a" ).sortable({
revert: true
});
$( ".hidden_drag" ).draggable({
revert: true,
stop: function(event,ui){
//some code
}
});
by using this u can able to get my element back to the default place but it should be invincible while it is reverting. how do i do it?
UPDATE
this is my fiddle http://jsfiddle.net/Q2h2w/46/
and it will say my requirement too

I have updated the fiddle. Please have a look at it.
I have added the mouseup event to detect mouse release. Hope that will solve your purpose:
http://jsfiddle.net/Q2h2w/56/
var count=0;
$('.button_area').draggable({
revert: true,
drag: function(){
count++;
},
stop: function(event,ui){
$('.button_area').off("mouseup");
$(this).show();
},
start: function( event, ui ) {
$('.button_area').on("mouseup",function(){
$(this).hide();
});
}
});

jQuery: get the name of the selected image in drag and drop?

I'm trying to figure out how to get the name of the image selected in a drag and drop function using jquery.
For this I am using the following code:
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
stack: '.drag',
revert: "invalid"
});
$("#droppable").droppable({
drop: function (e, ui) {
var srcc=$("#droppable").find('img').attr('src');
alert(srcc);
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
//helper: 'original',
containment: '#droppable',
tolerance: 'fit',
stack: '.drag'
});
x.resizable({
animate: true,
//aspectRatio: 16 / 9,
helper: "ui-resizable-helper",
handles: "n, e, s, w, nw, ne, sw,se"
});
x.appendTo('#droppable');
}
}
});
});
Please take a note of this line:
var srcc=$("#droppable").find('img').attr('src');
alert(srcc);
the problem is that on drop, I cannot get the name of the selected image/div!
P.S. by name of the image, I mean the actual URL of the image :
example: images/image_name.jpg
I have created a jsfiddle to explain the issue further.
please drag and drop the images in teh box bellow them and take a note of the alert(); message.
JSFIDDLE:
http://jsfiddle.net/7s1w4jgq/

Instead of $("#droppable") use ui.draggable
var srcc=ui.draggable.find('img').attr('src');
alert(srcc);
it will work.

You can also get it from ui.helper in your case because you are using helper: 'clone':
var srcc = ui.helper.find("img").attr("src")
alert(srcc);

or you could just use:
e.srcElement.currentSrc

Call ui.draggable as the selector instead of your class name
var srcc = $(ui.draggable).find('img').attr('src');
alert(srcc);
The problem is that you are not binding the element to the event.
Fiddle

jquery ui sortable modify html on creation

i have a page with 2 elements:
a list of items with draggable method
a lost of items with sortable method
i only allow dragging from list 1 to list 2, and that seems to work ok.
now, what i'm looking for is that when i drag item from list 1 to list 2 the newly created element will contain some different html then the element that was dragged. is that possible?
iv'e tried this approach but that does not seem to do to the job:
$("#list_2").sortable({
placeholder: "ui-state-highlight",
cursor: "move",
delay: 150,
forcePlaceholderSize: true,
opacity: 0.5,
scrollSpeed: 40,
receive: function( event, ui ) {
ui.item.html(ui.item.find(".hide").html());
}
});
$("#list_1").disableSelection();
$(".draggable").draggable({
connectToSortable: "#template_parts",
helper: "clone",
revert: "invalid",
stop: function( event, ui ) {
}
});
any help shall be greatly appriciated

var received = false;
$(function() {
$( ".draggable" ).draggable({
connectToSortable: "#list_2"
});
$( "#list_2" ).sortable({
receive: function(event,ui){
received = true;
},
stop: function(event,ui){
if(received){
ui.item.css('color','blue');
ui.item.html(ui.item.html()+' changed');
received = false;
}
}
});
$( "#list_2" ).disableSelection();
});
Example
http://jsfiddle.net/jd8A7/4/

Add div on hover using jquery

I build a project something like "trip planner" but I need to add on my cloned div-object an verticl line on left border with css:
.line
{ width:5px, height:200px; background:red;}
so to be something like this (you can see on hover an vertical line)
I was try to do this with code:
$(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:"#table",
snap: "#drop_here td"
})
// 3 make the clone resizable
.resizable());
//HERE IS MY PROBLEM IN CODE
$(".draggable").hover(function() {
$(this).append("<div class='line'></div>");
}, function() {
$(this).removeClass("line");
});
}
});
});
but dont work!
DEMO

The first problem is that your css has a , insted of a ;
.line {
display: none;
width: 5px;
height: 200px;
background: red;
}
Then for the jquery modify like this:
$('.draggable').hover(function(){
$(this).find('.line').show();
}, function() {
$(this).find('.line').hide();
});
In your markup place a .line (only one) just after every .draggable, but not on hover or it will append it every time you hover the .draggable creating tons of .lines
JSfiddle : http://jsfiddle.net/steo/JB7jN/1/

You have to bind the .hover() in the document ready like this:
$(document).ready(function(){
$(".draggable").hover(function() {
$(this).append("<div class='line'></div>");
}, function() {
$(this).children('.line').remove();
});
});

Your "hover out" handler removes the class from $(this) -- not from the appended child.
It's probably bad practice to dynamically create elements on hover, that are never deleted & will presumably gradually fill the document with garbage.

if you only want to add the line to the clone add the start property to the draggable options like this:
$( ".draggable" ).draggable({
revert: 'invalid',
helper:"clone",
snap: "#drop_here td",
opacity: 0.7,
start: function(event, ui){
var clone = $(ui.helper);
if (clone.children('div.line').length == 0)
clone.append("<div class='line'></div>");
}
});
Tested this and it works like a charm.. Dont forget to remove this part:
$(".draggable").hover(function() {
$(this).append("<div class='line'></div>");
}, function() {
$(this).removeClass("line");
});