We Keep Coding

Drop element centered on mouse position

I have a container where I want to drop an image from a menu below but when I drop it at the main container I cannot get the proper position, it seems it is dropped randomly in the container. How can I get the item dropped centered at mouse position?
var x = null;
$(function() {
$(".piece").draggable({
cancel: "a.ui-icon",
revert: "invalid",
helper: 'clone',
containment: '#container',
});
$(".piece").droppable({
accept: ".cap",
drop: function(event, ui) {
x = ui.helper.clone();
x.appendTo(this);
}
});
$(".cap").draggable({
cancel: "a.ui-icon",
helper: 'clone'
});
$("#container").droppable({
accept: ".piece",
drop: function(event, ui) {
x = $('<div/>');
x.addClass('piece-div');
x.css('top', ui.position.top);
x.css('left', ui.position.left);
x.draggable({
containment: '#container',
cursor: 'move',
});
x.appendTo(this);
x.droppable({
accept: ".cap",
drop: function(event, ui) {
var y = $('<img />');
y.attr('src', ui.helper.attr('src'));
y.css('top', ui.offset.top);
y.css('left', ui.offset.left);
y.appendTo(this);
}
});
ui.helper.remove();
}
});
});
I expect the four colored piece to be dropped centered at mouse position in the grey container but it gets dropped almost randomly. Here is a fiddle:
https://jsfiddle.net/littletrives/6p8grnsk/143/

Looks like you might just need to adjust your settings a little. These %'s work in the fiddle but you may need to adjust them with better CSS for your end purpose:
$("#container").droppable({
accept: ".piece",
drop: function(event, ui) {
x = $('<div/>');
x.addClass('piece-div');
x.css('top', '15%'); // Change this to some %
x.css('left','35%'); // Change this to some %
x.draggable({
containment: '#container',
cursor: 'move',
});

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

Sortable not working in Firefox but every other browser

I'm using this example (http://webdeveloperplus.com/jquery/saving-state-for-collapsible-drag-drop-panels/) in my asp.net application. I have the sortable working in every browser other than Firefox, for some reason it triggers the event but never go into the code.
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
start: function (event, ui) {
//Firefox, Safari/Chrome fire click event after drag is complete, fix for that
if ($.browser.mozilla || $.browser.safari)
$(ui.item).find('.dragbox-content').toggle();
},
stop: function (event, ui) {
ui.item.css({ 'top': '0', 'left': '0' }); //Opera fix
updateWidgetData();
}
})
.disableSelection();
});

If I recall correctly, Firefox doesn't accept functions with the wrong number of parameters as event functions. This is according to the standard so you should comply. Try this:
start: function (event) {
The ui parameter cannot follow the event to the function.

Here is code for using jQuery sortable for all Chrome & Firefox:
You must delete the line $(#sortable).disableSelection(); in jQuery Sortable code. (ref: Sortable | jQuery UI)
<script>
$(function () {
$("#sortable").sortable({
placeholder: "ui-state-highlight"
});
});
</script>
Hope it helps ;)

i have done
$("#stores-container").sortable({
stop: function(event, ui) {
textareaID = $(ui.item).find(' textarea').attr('id');
textareaVal=$(ui.item).find(' textarea').val();
editorID=$(ui.item).find('.mce-container').attr('id');
$( "#"+editorID ).remove();
$('#'+textareaID).show();
tinymce.init({selector: '#'+textareaID});
}
});

Glitchy behavior with JQuery Draggable (fiddle included)

I'm trying to use Jquery Draggable but I notice a flicker when the target item is lifted and then dropped, hovered over its old position, or brought out of its container. The image in the dragged div just disappears or appears in the wrong spot (it's supposed to always be displayed in the same position while dragging - as you'd expect).
Any idea how this can be corrected?
My code:
http://jsfiddle.net/PTSkR/28/
$(function () {
$('#container').isotope({
// options
itemSelector: '.study-box',
layoutMode: 'fitRows'
});
});
$(function () {
$(".study-box").draggable({
revert: "invalid",
helper: function () {
// We removeAttr('style') to get rid of the transform css that isotope added.
return $(this).clone().removeAttr('style').removeClass('isotope-item').addClass('drag-helper').appendTo('body');
},
start: function () {
$(this).hide();
},
stop: function () {
$(this).show();
},
zIndex: 100
});
});
$(function () {
$(".folder-box").draggable({ revert: "invalid" });
$(".folder-box").droppable({
// revert: "invalid",
accept: ".folder-box, .set-box",
drop: function (event, ui) {
var $this = $(this);
//ui.draggable.clone().removeAttr('style').removeClass('.folder-box').appendTo($this);
$('#container').isotope('remove', ui.draggable);
}
});
});

there is nothing wrong with the JavaScript, just remove all "position:fixed" from the CSS. It is messing the correct display off the background position.

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