jQuery ui replace contents of dragged item - javascript

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

Related

JQuery-UI draggable item become undraggable

I have 2 divs: leftDiv and mainDiv. leftDiv contains some list elements which are draggable and droppable into mainDiv. I want to make these dropped items draggable inside the mainDiv as well, but after the first drag inside this div, items become non draggable. How can I fix this? Here is my jQuery code:
$('#output li').draggable({
helper: 'clone',
revert: 'invalid'
});
$('#mainDiv').droppable({
drop: function (event, ui) {
if(ui.draggable.hasClass('foo')){
$(ui.helper).remove();
$(this).append(ui.draggable.draggable());
}
else {
var item = $('<div class="foo">').append(ui.draggable.text());
item.draggable();
$(this).append(item);
}
}
});
You can fix it like this:
$('#mainDiv').droppable({
drop: function (event, ui) {
if(ui.draggable.hasClass('foo')){
//$(ui.helper).remove();
var draggedItem = ui.draggable.draggable();
$(this).append(draggedItem);
draggedItem.draggable();
}
else {
var item = $('<div class="foo">').append(ui.draggable.text());
item.draggable();
$(this).append(item);
}
}
});
Online Demo (fiddle)

Droppables Not Defined Jquery ui

I am in a situation here, I am trying drag, drop and swap the divs, But an error is occuring,
The li's are to be swapped
Uncaught Type error, Cannot read the property of undefined.
HTML
<ul class="MatchingComponentAnswerRow cl-lg-column-6 cl-md-column-6 cl-sm-column-6 cl-xs-column-6">
<li class="MatchingComponentRow MatchingComponentAnswer ui-draggable"> <p>hello <b>option</b></p> </li>
<li class="MatchingComponentRow MatchingComponentAnswer ui-draggable"> <p>hello option2</p> </li>
<li class="MatchingComponentRow MatchingComponentAnswer ui-draggable"> <p>hello option2</p> </li>
</ul>
JAVASCRIPT
$(".MatchingComponentAnswerRow li").draggable({
appendTo: "body",
helper: "clone",
cursor: "move",
revert: "invalid"
});
initDroppable($(".MatchingComponentAnswerRow li"));
function initDroppable($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);
var li1 = $('<li>' + ui.draggable.text() + '</li>')
var linew1 = $(this).after(li1);
var li2 = $('<li>' + $(this).text() + '</li>')
var linew2 = $(ui.draggable).after(li2);
$(ui.draggable).remove();
$(this).remove();
initDroppable($(".MatchingComponentAnswerRow li"));
$(".MatchingComponentAnswerRow li").draggable({
appendTo: "body",
helper: "clone",
cursor: "move",
revert: "invalid"
});
}
});
}
Fiddle Demo
Used Dependencies
1.jquery ui 1.8.16,
2.jquery 1.7.2
Please Shed some light, Thanks

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

JQueryUI sortable : Allow sorting only to second list but not back to first

I have two lists I want to use Jquery UI sortable on. The way it is supposed to work is that list One contains a selection of items some of may be dragged to list 2. However sorting within list 1 or dragging back from list 2 to list 1 should not be allowed, finally sorting within list 2 is allowed.
The lists are like this
<ul class="sortable" id = "list1">
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>
<ul class="sortable" id = "list2">
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>
My current sortable call looks like this
$('#list1, #list2').sortable({
helper: "clone",
placeholder: "selected-option",
forcePlaceholderSize: true,
dropOnEmpty: true,
connectWith: '.sortable',
tolerance: "pointer",
revert: true,
cursor: "move",
receive: function (event, ui) {
// existing logic
},
update: function (event, ui) {
// existing logic
}
});
I know that I will have to manipulate the stop, receive functions on the sortable call to achieve this, but am not able figure out how to ..
$('#list1, #list2').sortable({
helper: "clone",
placeholder: "selected-option",
forcePlaceholderSize: true,
dropOnEmpty: true,
connectWith: '.sortable',
tolerance: "pointer",
revert: true,
cursor: "move",
beforeStop: function (event, ui) {
if($(ui.helper).parent().attr('id') === 'list1' && $(ui.placeholder).parent().attr('id') === 'list1')
return false;
else if($(ui.helper).parent().attr('id') === 'list2' && $(ui.placeholder).parent().attr('id') === 'list1')
return false;
}
});
http://jsfiddle.net/py7FN/

Draggable not working?

Hi all i have a function where i have to drag and drop elements here is my code:
$(document).ready(function() {
var i = 0;
$("button[id='columnadd']").click(function () {
alert(1);
var domElement = $('<aside id="shoppingCart' + i + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
i++;
$(this).after(domElement);
});
$(".small_box li" ).draggable({
appendTo: "body",
helper: "clone"
});
});
$('#shoppingCart ol').droppable({
accept: '.small_box li',
drop: function (event, ui) {
alert(1);
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
});
here is my html:
<aside class="small_box">
<h4>BRANDS</h4>
<ul>
<li id ="brand1"><a class="" href="#">Brand1</a></li>
<li id ="brand2">Brand2</li>
<li id ="brand3">Brand3</li>
<li id ="brand4">Brand4</li>
</ul>
</aside>
i should be able to drop in at this place <li class="placeholder">Add your items here</li>
var domElement = $('<aside id="shoppingCart' + i + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
any help is much appreciated
First, please fix your code indentations.
There are some mistakes on your code:
var i = 0;
I think it should be a global variable. So put it outside your $(document).ready(function() {}) block;
You create a DOM Element (which is the drop area) upon click and this element is not in your page until you click the trigger. By doing $('#shoppingCart ol').droppable({...}) in $(document).ready(function() {}) block you try to add droppable to an element that even not in your page, so this won't do a thing.
What you should do is make the element droppable after you create that element and put it on your page. here's an example:
$("button[id='columnadd']").click(function () {
// create the element
var domElement = $('<aside id="shoppingCart' + i++ + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
// put it after $(this)
$(this).after(domElement);
// at this point you have domElement in your page
// make it droppable
domElement.find("ol").droppable({
// put options here
greedy: true,
drop: function (event, ui) {
makeItDroppableToo(event, ui, this);
}
});
});
and this is the function to make your dropped element has its own placeholder
function makeItDroppableToo(e, ui, obj) {
$(obj).find(".placeholder").remove();
var placeholder = $("<ol><li class='placeholder'>You can also drop it here</li></ol>");
$("<li></li>").append(ui.draggable.text()).append(placeholder).appendTo($(obj));
// this is the same as the previous one
placeholder.droppable({
// put options here
greedy: true,
drop: function (event, ui) {
makeItDroppableToo(event, ui, this);
}
});
}
Try this fiddle, I was working with JQueryUI
http://jsfiddle.net/ashpriom/yHLGP/
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});

Categories

Resources