We Keep Coding

jQuery - creating a new draggable div on mousedown which can then be dragged in the same action

I want to dynamically create a draggable div on mousedown, which within the same mousedown event can then be dragged into a droppable area and dropped.
The point that I have got to so far is that a new draggable div is created on mousedown and that div then follows the cursor. But it cannot be dropped into the droppable area.
JS Fiddle here - http://jsfiddle.net/rqyv6bpg/
The jQuery code:
jQuery(document).ready(function ($) {
//on mousedown, creates a new draggable div in the cursor position
$(".search-result-container").mousedown(function(e){
var x = e.pageX + 'px';
var y = e.pageY + 'px';
$('<div/>', {
"class": "test",
text: "Draggable track that can be dropped into droppable queue!",
}).css({
"position": "absolute",
"left": x,
"top": y,
"z-index": 1000
}).draggable()
.appendTo($(document.body))
});
//in order to get the newly created div to instantly follow the cursor
$(document).on('mousemove', function(e){
$('.test').css({
left: e.pageX,
top: e.pageY
});
});
$( "#queue-bar" ).droppable();
});
Help would be greatly appreciated! Thanks in advance.

If I understood correctly, you are looking for the helper option of draggable widget.
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: "clone", // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
}
});
});
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: "clone", // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
}
});
});
.search-result-container {
background-color: red
}
#queue-bar {
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>
You can also create a custom helper by returning an element to be used as helper as shown below:
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: function(){
// return a custom element to be used for dragging
return $("<div/>",{
text: $(this).text(),
class:"copy"
})
}, // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
//you might want to reset the css using attr("style","")
ui.helper.clone().appendTo(this); // actually append a clone of helper to the droppable
}
});
});
.search-result-container {
background-color: red;
}
#queue-bar {
background-color: blue;
}
.copy{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>

Updated your fiddle, it works now!!
http://jsfiddle.net/rqyv6bpg/2/
Here is the JS code:
$( ".text" ).draggable({helper:'clone'});
$( "#queue-bar" ).droppable({
drop: function( event, ui ) {
$( this ).append( "<br/>"+ui.draggable.html() );
}
});

On dropping a component its adding it more than once on droppable

I am using custom helper method which is returning a <div>, on dropping that <div> its adding it more than one time. Please look at the code to understand it better
var dropHelp = true;
$(".product").draggable({
revert: 'invalid',
cursorAt: { top: -12, left: -20 },
connectToSortable: ".droppable",
helper: function(event) {
return $('<div class="helper">Helper</div>');
}
});
$(".droppable").sortable({
placeholder: "ui-state-highlight"
}).disableSelection();
$(".droppable").droppable({
drop: function(event, ui) {
if(dropHelp){
//clone and remove positioning from the helper element
var newDiv = $(ui.helper).clone(false)
.removeClass('ui-draggable-dragging')
.css({position:'relative', left:0, top:0});
$(this).append(newDiv);
//drop the draggable source element
} else {
$(this).append(ui.draggable);
}
}
});
$('#dropDrag').click(function(){
dropHelp = !dropHelp;
});
Here's the HTML
<button id="dropDrag">Toggle drop "Helper" or "Draggable"</button><br/><br/><br/>
<div class="product">Product 1</div>
<div class="product">Product 2</div>
<div class="product">Product 3</div>
<div class="droppable">Drop Target</div>
The full code can be find here.
I found out if we remove the connectToSortable property in draggable it will work fine. But i need that property and i am not getting the reason why it's behaving this way when connectToSortable is set.

Your drop() gets called twice because connectToSortable is also triggering a drop().
(Sortable is already a droppable)
I have edited your code to get the same result with receive function of sortable
DEMO
var dropHelp = true;
$(".product").draggable({
revert: 'invalid',
cursorAt: { top: -12, left: -20 },
connectToSortable: ".droppable",
helper: function(event) {
return $('<div class="helper">Helper</div>');
},
stop: function(){
$(this).css({opacity:1});
},
start: function(){
$(this).css({opacity:0});
},
});
$(".droppable").sortable({
placeholder: "ui-state-highlight",
receive: function(event, ui) {
if(dropHelp){
//clone and remove positioning from the helper element
var newDiv = $(ui.helper).clone(false)
.removeClass('ui-draggable-dragging')
.css({position:'relative', left:0, top:0});
$(this).append(newDiv);
//drop the draggable source element
} else {
$(this).append(ui.draggable);
}
}
}).disableSelection();
$('#dropDrag').click(function(){
dropHelp = !dropHelp;
});

jQuery UI - Dynamically set minHeight of resizable element

I have a resizable element with a draggable and resizable element inside it.
There is no maxHeight to the resizable element but I want to set the minHeight to be the height of the child element plus the position from the top.
Setting a constraint on the size of a child based on it's parent is simple enough but not a parent based on it's children.
Here's my code:
HTML:
<div id="resizable">
<div class="draggable"></div>
</div>
jQuery:
var buildMinHeight = 0;
$("#resizable").resizable({
start: function(e, ui) {
$(".draggable").each( function() {
buildMinHeight = ($(this).height()+$(this).position().top > buildMinHeight) ? $(this).height()+$(this).position().top : buildMinHeight;
});
},
minHeight: buildMinHeight // THIS IS NOT BEING SET - GUESSING I MIGHT NEED TO SET IT WITHIN THE START EVENT
});
$(".draggable").resizable({
containment: "#resizable"
}).draggable({
containment: "parent"
});
Initial CSS:
#resizable {
width: 250px;
height: 250px;
background:red;
}
.draggable {
width:150px;
height:150px;
background:blue;
}
And here's a jsfiddle... http://jsfiddle.net/many_tentacles/vKLB4/2/

You have to use the css property of your outer object in the start function :
$("#resizable").css({
minHeight: buildMinHeight,
});
the complete javascript code will look like this :
var buildMinHeight = 0;
$("#resizable").resizable({
start: function (e, ui) {
$(".draggable").each(function () {
buildMinHeight = ($(this).height() + $(this).position().top > buildMinHeight) ? $(this).height() + $(this).position().top : buildMinHeight;
$("p").html(buildMinHeight);
});
$("#resizable").css({
minHeight: buildMinHeight,
});
}
});
$(".draggable").resizable({
containment: "#resizable"
});
$(".draggable").draggable({
containment: "parent"
});

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

get Drop Target of component

Hi, I want to get Drop target className/ID after Drop Event. Does anybody tell me how to get ?
<div class="drop_1" id="drop1"></div>
<div class="drop_2" id="drop2"></div>
<div class="drop_3" id="drop3"></div>
all DIV component must be drag-able & drop-able onto each other

use the this.id inside the drop handler
jsFiddle demo
$( ".selector" ).droppable({
drop: function(event, ui) {
console.log(this.id);
}
});

Example
$(function() {
***/* Make draggable */***
$(".drop_1, .drop_2, .drop_3").draggable();
var dropOpts = {
accept:".drop_1, .drop_2, .drop_3",
drop:dropCallback,
greedy:true
};
/* Droppable */
$(".drop_1, .drop_2, .drop_3").droppable(dropOpts);
/*get your Drop target*/
function dropCallback(e) {
alert("The firing droppable was " + e.target.className);
}
});