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

set position, top and left for a draggable object

I have a draggable object set to position:relative but I need to change it from relative to absolute only when I drag it and I want the object to stay in its initial space.
I tried to set "drag" in this way:
$('obj').draggable({
cursor: 'move',
revert: true,
drag: function () {
var posizione = $(this).position();
var posizione_x = posizione.left;
var posizione_y = posizione.top;
$(this).css({
"left": posizione_x,
"top": posizione_y,
"position": "absolute"
});
},
stop: function () {
$(this).css("position", "relative");
}
})
or in this way:
$('obj').draggable({
cursor: 'move',
revert: true,
drag: function () {
var posizione_x = $(this).offsetLeft;
var posizione_y = $(this).offsetTop;
$(this).css({
"left": posizione_x,
"top": posizione_y,
"position": "absolute"
});
},
stop: function () {
$(this).css("position", "relative");
}
})
but it doesn't work.

I think you need .offset().left and .offset().top
Could you detail "does not work" (error in the console? what happend? how is positionned the element?)
And $('obj') target a <obj> tag, are you certain you element is well targeted?
Maybe you try to do something like that: http://jsfiddle.net/KyleKatarn/awjh79uw/1/

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

Sync two div using javascript

In my fiddle , you can see two parent div and child div in each parent !
The child div from First parent div can drag and resize ( Using JQueryUI ).
I have dragEnd and resizeEnd event for this div .
What I want to do is , after dragEnd , to set the location of child div of Second Parent div , same as first's child div .
And also , after resizeEnd , to set the size of child div of Second Parent div , same as first's child div .
Want to synchronize two child div.
Thanks !
html
<div id="resizable" class="ui-widget-content">
This is text Line 1<br/>
</div>
<img src="http://www.psdgraphics.com/file/abstract-background.jpg" width="400" height="150" />
</div>
<br/>
Second<br/>
<div id="previewContainer">
<div id="previewText" class="ui-widget-content2">
This is text Line 1<br/>
</div>
<img src="http://www.psdgraphics.com/file/abstract-background.jpg" width="400" height="150" />
</div>
<br/>
JavaScript
var DEF_HEIGHT = 100; // the #resizable default height
$( "#resizable" ).resizable({
containment: 'parent',handles: "se",stop:resizeStop,
aspectRatio: true,
resize: function( event, ui ) {
var curHeight = (ui.size.height/ DEF_HEIGHT) * 100;
$(this).css('font-size', curHeight + '%');
}
}).draggable({containment: 'parent'
});
$( "#resizable" ).draggable({
start: function() {
},
drag: function() {
},
stop: function() {
alert("Drag End");
}
});
$("#resizable").resizable({
stop: function(event, ui) {
alert('Resize End');
}
});
function dragStop(event, ui){
}
function resizeStop(event, ui){
}

You can do it like this:
$("#resizable").resizable({
...
stop: function (event, ui) {
$preview.css({width: this.style.width, height: this.style.height});
}
})
.draggable({
...
stop: function (e, ui) {
$preview.css($(this).position());
}
});
Demo: http://jsfiddle.net/YxcS8/6/

Resizing issue with jQuery sortable resizable draggable

I made a sortable, resizable, draggable, with-clone portlet but when I resize it I run into a bug.
My script:
<script type="text/javascript">
$(function() {
$('#column1').draggable({
helper:'clone',
connectToSortable:'#sort',
handle:'.widget-head',
});
$('#sort').sortable({
handle:'.widget-head',
connectWith: "#sort",
out: function (e,ui) {
$("#sort").children().resizable({ axis: 'x',containment: 'parent',
resize:
function(event, ui)
{
ui.size.width = ui.originalSize.width;
}
});
}
});
});
</script>

I figured out that the problem was related to the styling and was able to fix it. The position changed to absolute every time I resized, so to handle that I'm using this:
$('#sort').sortable({
handle:'.widget-head',
connectWith: "#sort",
out: function (e,ui) {
$("#sort").children().resizable({
axis: 'x',
containment: 'parent',
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
(ui.helper).css({'position': '', 'top': '0px'});
}
});
}
});