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.
Related
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
I have a cloned element which I am able to drag however I wish to drop it in a specific div element and if valid not revert back to its original position, however it is always reverting back to its original position whether it is valid or not.
I am currently using the code below:
$("ul#objectsList li").draggable({
revert: 'invalid',
snap: "#objectsDropBox",
snapMode: "inner",
helper: function() { return $(this).clone().appendTo('body').show(); },
start: function(e, ui) { $(ui.helper).addClass("ui-draggable-helper");}
});
$("#objectsDropBox").droppable({
accept: "ul#objectsList li",
drop: function( event, ui ) {
alert('hi');
}
});
Why is it not staying in the div when a valid draggable is dropped?
Try this
$("#objectsDropBox").droppable({
accept: "ul#objectsList li",
drop: function (event, ui) {
$(this).append(ui.draggable);
//if you want to retain the element use ui.draggable.html() or clone it.
}
});
Fiddle - http://jsfiddle.net/dmNhZ/
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
I have jquery drag and drop working so I can move one row in a table to another.
the demo is here:
http://www.aussiehaulage.com.au/Default.aspx
I use jquery-ui-1.8.22 to make my table draggable/droppable.
My javascript is :
$(document).ready(function () {
$(".draggable").draggable({
helper: function () { return "<div class='ghost'></div>"; },
start: resizeGhost,
revert: 'invalid'
});
$(".droppable").droppable({
hoverClass: 'active',
drop: function (event, ui) {
var target = $(event.target);
var draggable = ui.draggable;
draggable.insertBefore(target);
},
tolerance: 'touch'
});
});
However when i move the row, if the mouse cursor is in between 2 rows on the droppable table both droppable rows are highlighted.. I need to make it so it will only highlight 1 droppable row at a time..
is this possible?
Add a new option in your droppable element, using either tolerance fit or intersect
$(".droppable").droppable({
hoverClass: 'active',
tolerence: 'intersect',
drop: function (event, ui) {
var target = $(event.target);
var draggable = ui.draggable;
draggable.insertBefore(target);
},
tolerance: 'touch'
});
And for your reference: jquery-ui
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/