One thing left in my project was to make the two divs draggable and droppable simultaneously. Now I have the working code of divs that can be dragged and dropped but for example I can drag a div from target area and drop it on users area but I cant seem to figure out a way to drag those divs from users and assign to different users.
$(document).ready(function(){
$(".dragable").draggable({
cancel: "a.ui-icon",
revert: true,
helper: "clone",
cursor: "move",
revertDuration: 0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
// clone item to retain in original "list"
var $item = ui.draggable.clone();
$(this).addClass('has-drop').append($item);
}
});
});
http://jsfiddle.net/coder880/TpbZk/31/
The issue is because once the item is dragged/dropped it is then cloned. This clone does not have the draggable() plugin instantiated on it. You need to call draggable() on the $item again. Try this:
var draggableOptions = {
cancel: "a.ui-icon",
revert: true,
helper: "clone",
cursor: "move",
revertDuration: 0
}
$(".dragable").draggable(draggableOptions);
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
var $item = ui.draggable.clone();
$item.draggable(draggableOptions);
$(this).addClass('has-drop').append($item);
}
});
Updated fiddle
it should only be cloned when its from target otherwise it should move it.
To achieve this you need to remove the helper: 'clone' option in the cloned draggable element and maintain a flag on the element to determine whether it is a brand new clone or has been dragged previously and moved again. To do this you could use a class, something like this:
$(".dragable").draggable({
cancel: "a.ui-icon",
revert: true,
helper: "clone",
cursor: "move",
revertDuration: 0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
var $item = $(ui.draggable)
if (!$item.hasClass('clone')) {
$item = $item.clone().addClass('clone');
$item.draggable({
cancel: "a.ui-icon",
revert: true,
cursor: "move",
revertDuration: 0
});
}
$(this).addClass('has-drop').append($item);
}
});
Example fiddle
Related
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',
});
I have been trying to achive functionality as follows:
-you can drag and drop multiple 450x150 onto .drop_cont
-then you can drag and drop 300x150 onto 450x150
I tried adding and removing classes but it doesn't seem to work.
Is there any way to do that, probably there is some way that I didn't think of.
Demo:
jsFiddle
Sample Code:
$(document).ready(function () {
$( ".idg_row" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".idg_column" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".drop_cont" ).droppable({
accept: ".idg_row",
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
$( ".droppableC" ).droppable();
});
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
}
Once you add the class, you need to recall droppable to run on the new elements.
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
$('.droppableC:not(.ui-droppable)' ).droppable();
}
When I drop some divs into a sortable pane, I can grab the newly created divs only after the second time I click on them.
I suppose this is a refresh-related issue, but I cannot figure out how to make it work.
Here is the jsfiddle: http://jsfiddle.net/DvE5Q/
And the code:
$(".box").draggable({
helper: 'clone'
});
$("#left").droppable({
accept: '.box.out',
drop: function (e, ui) {
$(this).append('<div class="box"></div>');
var droppedBox = $(this).children().last();
$(droppedBox).html(ui.helper.html());
}
});
$("#left").sortable();
Thanks for your help!
I would use the attribute connectToSortable: '#left'
DEMO http://jsfiddle.net/DvE5Q/1/
$(".box").draggable({
helper: 'clone',
connectToSortable: '#left'
});
$("#left").droppable({
accept: '.box.out',
drop: function (e, ui) {
}
});
$("#left").sortable();
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/
I have a drag and drop example that reverts a draggable object back to it's original position when it is dropped in a droppable div.
My problem is that when revert is on valid on my draggable objects I am able to drag the objects to a different position on the page, My draggable objects only revert back when I drop them into the droppable div.
I want my draggable objects to revert back regardless of where on the page you drag them to?
I have tried this which works but does not work.
{
revert: 'vaild',
stop: function(){
$(this).draggable('option','revert','invalid');
}
My problem here is that my draggable objects revert but no not revert when I drop them into the droppable div.
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var dragElemId = ui.draggable[0].id;
var imgPath = $('#' + dragElemId).attr("des-image");
$( this )
.find( ".drop-image" ).removeAttr("src").attr("src",imgPath);
}
});
});
</script>
Setting the revert property to true will cause them to always revert.
$( "#draggable" ).draggable({
revert: true
});
$( "#draggable1" ).draggable({
revert: true
});
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
//ommited for brevity
}
});
Working Example: http://jsfiddle.net/yLuvv/