I want to have the sortable functionality within each sortable. Between two sortables, I want to move a draggable item onto a placeholder ie a droppable item. I want it to seem as if the item falls onto the droppable. Now, it should be sortable within this other sortable. For this reason, i have made all the sortable connected, and on drop on the placeholder, I removed that placeholder and added this dragged item.
But, on hover of an item on any other sortable, it shows the animation of items moving around. I dont want that animation because there should ideally be no extra spaces available. The item should only go on a droppable.
Is it possible ? And how do I do it ?
Thanks
Link to the fiddle I created is : http://jsfiddle.net/ZTu24/
Code is as follow :
var rearrange = function (rowSelector) {
var counter = 1;
$("#" + rowSelector).children(".innerDiv").each(function () {
$(this).children(":first").html(this.id + " " + counter++);
});
}
$(function () {
rearrange("row1");
rearrange("row2");
$(".innerDivPlaceholder").droppable({
activeClass: "droppableHighlight",
drop: function (event, ui) {
alert("Dropped !!");
var sourceRow = ui.helper.context.attributes[1].value; // to get value of token id
var destinationRow = $(this).context.attributes[1].value; // to get value of token id
sourceRow1 = new String(sourceRow);
destinationRow1 = new String(destinationRow);
//console.log(ui.helper.context);
alert("Source Row = " + sourceRow1);
alert("Destination Row = " + destinationRow1);
if (sourceRow == destinationRow) {
alert("Source equals destination");
dropCancelled = true;
return false;
} else {
$(this).remove();
}
}
});
$(".sortable").sortable({
connectWith: ".sortable",
revert: true,
cancel: ".ui-state-disabled",
//items : ".innerDiv:not(.innerDivPlaceholder)" ,
stop: function (event, ui) {
//$(".sortable").sortable( "enable" );
var targetList = $(this);
rearrange(targetList.context.id);
}
});
$(".sortable").disableSelection();
$(".sortable").on("sortreceive", function (event, ui) {
var sourceList = ui.sender;
var targetList = $(this);
alert("In sortreceive ");
//alert("Source id = " + sourceList.context.id);
//alert("Target id = " + targetList.context.id);
if ($(this).sortable('toArray').length > 3) {
$(ui.sender).sortable('cancel');
} else {
var placeHolderDiv = document.createElement('div');
placeHolderDiv.setAttribute("id", "placeholder100");
placeHolderDiv.setAttribute("tokenid", sourceList.context.id);
placeHolderDiv.setAttribute("class", "innerDivPlaceholder innerDiv ui-state-default ui-state-disabled floatLeftClass column3");
//var innerPara1 = document.createElement('p');
//innerPara1.textContent = "placeholder";
//placeHolderDiv.appendChild(innerPara1);
$(placeHolderDiv).droppable({
activeClass: "droppableHighlight",
drop: function (event, ui) {
alert("Dropped !!");
var sourceRow = ui.helper.context.attributes[1].value;
var destinationRow = $(this).context.attributes[1].value;
sourceRow1 = new String(sourceRow);
destinationRow1 = new String(destinationRow);
alert("Source Row = " + sourceRow1);
alert("Destination Row = " + destinationRow1);
if (sourceRow == destinationRow) {
alert("Source equals destination");
dropCancelled = true;
return false;
} else {
$(this).remove();
}
}
});
$(placeHolderDiv).appendTo("#" + sourceList.context.id).sortable({
connectWith: ".dottedDiv",
revert: true,
cancel: ".ui-state-disabled",
//items : ".innerDiv:not(.innerDivPlaceholder)",
stop: function (event, ui) {
//$(".sortable").sortable( "enable" );
var targetList = $(this);
rearrange(targetList.context.id);
}
}).disableSelection();
rearrange(sourceList.context.id);
rearrange(targetList.context.id);
alert("Received !!");
}
});
$(".dropDown").DropDown({
menus: [{
label: "Increase column span",
action: "new",
icon: 'print-icon'
}, {
label: "Decrease column span",
action: "save",
icon: 'print-icon' // classes: placing appropriate images at right place
}],
maxWidth: 100,
groupLabel: 'File Hello',
groupIcon: 'tick-icon',
orientation: 'horizontal'
});
});
I encountered just same problem as yours. I set the placeholder as a dummy div tag to disable moving animation.
$("#dragger").sortable({
connectWith: "#dropper",
placeholder: "<div></div>"
});
$("#dropper").sortable();
Maybe that can help for someone, set the placeholder height to zero for disable the moving animation.
change: function (event, ui) {
$(ui.placeholder).height(0);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.