We Keep Coding

how to avoid drag and drop for a specific list item in sap.m.list

I have implemented drag n drop for sap.m.list as below. Now I need to avoid drag an drop for specific items of the list. How to stop drag n drop feature for only specific items
jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');
my.clauseRendering = function (oControl) {
//inject control
//debugger;
test = this;
test.oControl = oControl;
};
my.clauseRendering.prototype = {
onAfterRendering: function () {
$("#clauseList-listUl").addClass('ui-sortable');
$("#clauseList-listUl").sortable({
//connectWith : ".ui-sortable"
cancel: '',
start: function(event, ui) {
debugger;
ui.item.startPos = ui.item.index();
},
// sync the model after reordering in the box
stop: function(event, ui) {
//debugger;
----
}
}).disableSelection();
}
var ClauseList=sap.ui.getCore().byId("clauseList");
ClauseList.addDelegate(new my.clauseRendering(ClauseList));
here the html view for the list is like the list will take tag with class "ui-sortable" so that all the items in the list are draggable . Now I need to stop drag and drop for specific items in that list.

You can initialize the sortable with the cancel option:
$(".ui-sortable").sortable(
{ cancel: ".non-draggable" }
);
Or you can set it later:
$( ".ui-sortable" ).sortable( "option", "cancel", ".non-draggable" );
Of course instead of the "non-draggable" class you can use any selector

$( "#sortable1" ).sortable({
items: "li:not(.ui-state-disabled)"
});

Jquery Sortable on table rows run function on change

I have a script that counts the number of rows in a table and assigns a value attribute to an input field. I am adding the draggable plugin Sortable to table rows, what would be the best way to run this script then on document ready, and on change. The first part works, but i am not getting alerted when the table rows change.
this is now my revised code:
function countRows(){
var i = 0;
$('#offices td input').each(function(){
$(this).attr("value", ++i);
});
}
$(document).ready(countRows);
// Sortable rows
$('.sorted_table').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>'
})
$('.sorted_table').children("tbody").sortable({
stop: function (event, ui) {
countRows(); // re-number rows after sorting
}
});

Assuming you are using jQuery UI Sortable:
$('.sorted_table').children("tbody").sortable({
stop: function (event, ui) {
countRows(); // re-number rows after sorting
}
});
jsFiddle demo here: http://jsfiddle.net/7vmf1c4L/

Draggable connected to sortable

I want to be able to drag items from one Infragistics DataGrid to another, while the items in the Destination grid are also sortable.
Unfortunately, I cannot use jsfiddle because I cannot use the infragistics controls there.
$("[id*=sourceGrid] [id*=dataTbl] tbody tr").draggable({
helper: "clone",
revert: "invalid",
connectToSortable: '[id*=destination]'
});
$("[id*=destinationGrid]").sortable({
cursor: 'move',
helper: fixHelperModified,
revert: true,
items: "[id*=container] [id*=dataTbl] tbody tr:not(.placeholder)",
receive: function (event, ui) {
var grid = $IG.WebDataGrid.find("destinationGrid");
$sentence = $(ui.item).find("td").eq(0).html();
var row = new Array(Math.floor((Math.random() * 100) + 1), $sentence, $order);
grid.get_rows().add(row);
}
});
The problem is: When I drop items from the sourceGrid to the destinationGrid, I don't want the draggable to be placed into the new Grid - I only want to use the receive function to create a new row in the grid with the values from the draggable element. Right now, I get both - the newly created gridRow and the dropped item. How can I prevent that?

You can catch the copied item in the beforeStop event.
var newItem;
$(".list").sortable({
connectWith: ".list",
beforeStop: function (event, ui) {
newItem = ui.item;
},
receive: function(event,ui) {
$(newItem).doSomething();
}
});​
Reference and credit to this answer: https://stackoverflow.com/a/5864644/3523694

jQuery sortable tables get squeezed when row positions swapped

I have ui-sortable table implemented with jquery-ui. The rows can be dragged to swap positions. All works fine, but when the row is dragged, all the remaining rows in a table get squeezed to 1/5 size (columns overlapping).
here's the code that invokes the sortable script on the table:
$(document).ready(function () {
var fixHelper = function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
};
$("tbody.sortable").sortable({
helper: fixHelper,
connectWith: "tbody.sortable",
containment: "parent",
dropOnEmpty: true,
cancel: "tr.sort-disabled",
receive: function (event, ui) {
ui.item.find("input[type='hidden']").val(this.id);
sortableDummyRowsUpdate();
}
});
});
When the dragged row is released to the new position, the table returns to normal. But while dragging everything looks awful

How to sync jquery sortable lists that contain cloned elements?

I've a peculiar situation. I have two lists. 1 list contains all items, and 2 contains top list. Obviously items overlap, and items in the second list are marked with class clone-23 clone-25 according to which element from list 1 are they cloned from.
Example:
List 1
1 run
2 eat
3 drink
4 play
List 2 (TOP)
1 run (class clone)
2 eat (class clone)
When re-arranged data is saved to DB.
I would like to avoid refresh and re-pulling of data from DB. So I would like to sync position of elements in two lists.
So whenever user drags around item in list 1, list 2 automatically shows changed positions and vice versa.
I initiate my sortable:
// Initiate jquery ui sortable
$(".word-list").sortable({
tolerance: 'pointer',
cursor: 'move',
forcePlaceholderSize: true,
dropOnEmpty: true,
connectWith: 'ol.word-list',
//containment: "body",
//
start: function(event, ui) {
// Starting position of the word element
//ui.item.startPos = ui.item.index();
//console.dir(ui.item.startPos);
},
//
stop: function(event, ui) {
//
},
update: function(event, ui) {
//
save_word_order(this);
//
},
out: function(event, ui) {
//
},
over: function(event, ui) {
//
},
placeholder: "ui-state-highlight"
});
Clone element html:
<li data-con-id="94" data-order-id="1" data-note="" class="ui-state-default clone-94"</li>
Lists are simply:
<ol id="tabs-1" class="word-list"></ol>
<ol id="tabs-2" class="word-list"></ol>
Any thoughts?

See this fiddle for code which syncs the order of items common to both lists:
http://jsfiddle.net/Fresh/22jc2/
Note that in my example I have simplified list two's li elements by not including the clone attributes; instead I am comparing items in both list by the list item's innerText value. It should be fairly easy for you to refactor my solution to use the clone item attributes if you really need to use them.
The script which I've used to achieve the synchronisation of the order of the common list items is:
var reorderLists = function (list1, list2) {
$('#' + list1 + ' li').each(function (index) {
var sortableItemWithText = $('#' + list2 + ' li:contains(' + this.textContent + ')');
if (sortableItemWithText.length === 1) {
sortableItemWithText.appendTo('#' + list2);
return;
}
});
};
$("#sortable1, #sortable2").sortable({
update: function (event, ui) {
var parentNodeId = ui.item[0].parentNode.id;
if (parentNodeId == "sortable1") {
reorderLists("sortable1", "sortable2");
}
if (parentNodeId == "sortable2") {
reorderLists("sortable2", "sortable1");
}
}
});
$("#tabs").tabs();
Note that the syncing of the order of common list items works if you change the position of items in either list 1 or list 2.
Also note that by commenting out:
$("#tabs").tabs();
You'll be able to see the lists updating automatically when you move the list items; this makes it easier to confirm that the re-order routine is work as expected.

perhaps this can help :
See this fiddle for code which syncs the order of items common to both
lists:
http://jsfiddle.net/penjepitkertasku/6bk7B/1/
$(function() {
var dragElementID = "";
var dropElementID = "";
var dragElementItemName = "";
var allElementItemName = "";
$(".word-list").sortable({
tolerance: 'pointer',
cursor: 'move',
helper: 'clone',
//revert: 'invalid',
forcePlaceholderSize: true,
dropOnEmpty: true,
connectWith: 'ol.word-list',
start: function(e, ui){
var id = $('ol.word-list').children().index($(ui.item[0]));
var name = $('ol.word-list').children(':eq(' + id + ')').text();
dragElementItemName = name;
dragElementID = this.id;
},
stop: function(event, ui) {
var id = $('ol.word-list').children().index($(ui.item[0]));
//validate
if(dragElementID == dropElementID) { return; }
if(id == -1)return;
if(dragElementID == "tabs-1")
{
if(allElementItemName.indexOf(dragElementItemName,1) > 0) { $(this).sortable('cancel'); return; }
var elm = $(ui.item[0]).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone');
$('ol.word-list').children(':eq(' + id + ')').after(elm);
$(this).sortable('cancel');
}else{
ui.item.remove();
}
},
update: function(event, ui) {
//
//save_word_order(this);
//
},
out: function(event, ui) {
//
},
over: function(event, ui) {
//
dropElementID = this.id;
allElementItemName = '|' + $('#' + dropElementID + ' li').text() + '|';
},
placeholder: "ui-state-highlight"
});
});