Develop Reference

jQuery ui replace contents of dragged item

I want to replace the dropped item's html content. I'm able to append the new html content but in this case the sortable receives the dragged item as well as appends the new item.
receive: function (event, ui) {
$(this).append('<li class="new">this is item 1</li>');
How can I actually replace the dragged item with the new item instead of appending? Or remove the original dragged item?
Demo:
http://jsfiddle.net/v97u5qtx/
HTML:
<ul id="answers">
<li id="item-1">Item 1</li>
<li id="item-2">Item 2</li>
</ul>
<ul class="container">
</ul>
jQuery:
$(function() {
$("#answers li").draggable({
connectToSortable: '.container',
helper: 'clone',
revertDuration: 0,
revert: true
});
$(".container").sortable({
connectWith: '.container',
revert: true,
receive: function (event, ui) {
var id = ui.item.attr("id");
if ( id == 'item-1') {
$(this).append('<li class="new">this is item 1</li>');
} else if ( id == 'item-2') {
$(this).append('<li class="new">this is item 2</li>');
}
}
});
$("ul, li").disableSelection();
});

Please check this,
Updated container code as following,
$(".container").sortable({
connectWith: '.container',
revert: true,
receive: function (event, ui) {
var id = ui.item.attr("id");
if ( id == 'item-1') {
$(this).append('<li class="new">this is item 1</li>');
} else if ( id == 'item-2') {
$(this).append('<li class="new">this is item 2</li>');
}
$('.container .ui-draggable').remove();
}
});
DEMO

Draggable list into html5 table has bug

There are two lists of items need to be mapped into a table. I've create the table and draggable list item followed by reference-style link to Accessing table cell data within list items with Javascript.
The current situation
I have two lists, and need to be filled into two columns(with different ids); ideally, the the credit card list item can only be put into credit card column, vice versa for api list and api field.
The current issue
When I dragged items from api list to api field, it displayed double text.
Two list items can drag into different fields. How can I make the list items limited into matched table column?
Here is the JsFiddle along with some sample code:
$("#ccField li").draggable({
appendTo: "body",
helper: "clone",
cursor: "move",
revert: "invalid"
});
$("#apiField li").draggable({
appendTo: "body",
helper: "clone",
cursor: "move",
revert: "invalid"
});
ccDroppable($("#creditCardApiTable table td"));
apiDroppable($("#creditCardApiTable table td"));
function ccDroppable($elements) {
$elements.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-drop-hover",
accept: ":not(.ui-sortable-helper)",
over: function (event, ui) {
var $this = $(this);
},
drop: function (event, ui) {
var $this = $(this);
$("<span></span>").text(ui.draggable.text()).appendTo(this);
$("#ccList").find(":contains('" + ui.draggable.text() + "')")[0].remove();
}
});
}
function apiDroppable($elements) {
$elements.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-drop-hover",
accept: ":not(.ui-sortable-helper)",
over: function (event, ui) {
var $this = $(this);
},
drop: function (event, ui) {
var $this = $(this);
$("<span></span>").text(ui.draggable.text()).appendTo(this);
$("#apiList").find(":contains('" + ui.draggable.text() + "')")[0].remove();
}
});
}

Is this what you are looking for?
http://jsfiddle.net/ryaL3xpk/3/
$("#ccField li").draggable({
appendTo: "body",
helper: "clone",
cursor: "move",
revert: "invalid"
});
$("#apiField li").draggable({
appendTo: "body",
helper: "clone",
cursor: "move",
revert: "invalid"
});
function droppableField($element, $accept) {
$element.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-drop-hover",
accept: $accept,
over: function (event, ui) {
var $this = $(this);
},
greedy:true,
tolerance:'touch',
drop: function (event, ui) {
var $this = $(this);
$this.text(ui.draggable.text()).appendTo(this);
}
});
}
droppableField($('#creditCardApiTable table td .ccDropField'), '#ccField li');
droppableField($('#creditCardApiTable table td .apiDropField'), '#apiList li');
So basically, you allow each span to be droppable, and each accepts different draggable field.

How will we get the id of a particular <ul> in jquery?

This is the jquery function which makes the ul draggable and and a particular area droppable.
//Jquery
$(function () {
// there's the gallery5 and the trash
var $gallery5 = $("#gallery5"),
$trash = $("#trash");
// let the gallery5 items be draggable
$("ul", $gallery5).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move",
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
accept: "#gallery2 > li",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
alert("trash");
deleteImage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery5.droppable({
accept: "#gallery li , #gallery2 li , #gallery4 li , #gallery3 li",
activeClass: "custom-state-active",
drop: function (event, ui) {
alert("gallery5");
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
// image recycle function
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
function recycleImage ($item) {
// alert("recycleImage");
$item.fadeOut(function () {
$item
.find("a.ui-icon-refresh")
.remove()
.end()
.css("width", "250px")
.find("img")
.css("height", "50px")
.end()
.fadeIn()
.appendTo($gallery5);
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
});
This is called in a loop and the data is coming from the database.
//BODY
<ul id=coming from database>
<li>
description
id
</li>
</ul>
There are multiple uls in the output. I want to check the id of that particular ul which i am dragging.
Thanx.

jQuery
$('ul').each(function(){
var ulID = $(this).attr('id');
});
This will get the ID from each ul, you can then do what you need with it . . .

Have you ever try this:
var ids = '';
$('ul').each(function(){
ids += $(this).attr('id');
});

Try this:
$('ul').each(function()
{
var ids= $(this).attr('id'); // This is your rel value
});

jQuery UI sortable: Move clone but keep original

Right now I have a column of elements and I have it to the point where where I drag, it clones but when I drop, it removes the original as well.
$( ".column" ).sortable({
helper: 'clone',
connectWith: ".column",
connectWith: ".grid",
start: function(e, ui){
ui.placeholder.height(ui.item.height());
$(".column" ).find('.portlet:hidden').show()
console.log('started')
},
stop: function(event, ui) {
$(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
}
});
How can I keep the original where its at (without re-appending it to the column) and have the clone move to the desired location?

Use $(this).sortable('cancel') inside the stop event handler to revert the item back to it's original list/position. http://api.jqueryui.com/sortable/#method-cancel
$( ".column" ).sortable({
helper: 'clone',
connectWith: ".column",
connectWith: ".grid",
start: function(e, ui){
ui.placeholder.height(ui.item.height());
$(".column" ).find('.portlet:hidden').show()
console.log('started')
},
stop: function(event, ui) {
$(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
$(this).sortable('cancel');
}
});
UPDATE:
To append the element to the second list in the location the item was dropping, do something like the following:
stop: function(event, ui) {
var toListID = ui.item.parent().attr('id');
var idx = $('#' + toListID).children().index($(ui.item[0]));
if(idx== -1)return;
var elm = $(ui.item[0]).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone');
$('#' + toListID).children(':eq('+idx+')').after(elm);
$(this).sortable('cancel');
}
See fiddle for full demo

If anyone using new version just use:
revert: true
More details here: jQuery Sortable - Keep it in original list

Draggable element covers another one when moving back

Currently I'm having a small problem with the demo at http://jsfiddle.net/nivea75ml/yCnh5/.
Whenever I drag a pink box from the list to the grey area and later move it back, it covers another one in the same list.
How can this behaviour be avoided?

Droppable and sortable
$('#draggableList').sortable({
receive: function(event, ui) {
var item = $('.ui-draggable-dragging');
item.removeAttr("style");
item.removeAttr('class');
item.addClass('draggable');
}
});
var $tab_items = $("#droppable").droppable({
//accept: ".draggable",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var item = $(this);
var olditem = $(".draggable.ui-sortable-helper").clone();
if (olditem[0] != null) {
olditem.removeAttr('class');
olditem.addClass('dragged');
olditem.css({
'position': 'absollute',
'top': ui.offset.top,
'left': ui.offset.left
});
olditem.draggable({
connectToSortable: "#draggableList",
helper: "original",
revert: 'invalid'
});
ui.draggable.remove();
$('#droppable').append(olditem).show("slow");
}
},
out: function(event, ui) {}
});
http://jsfiddle.net/yCnh5/25/