We Keep Coding

SortableJS - Disable sort on a specific element

I'm having difficulty disabling sorting on a specific li in my ul.
I'm using SortableJS.
<ul id="items">
<li class="static">
<div class="image"><img src="image.jpg" /></div>
<div class="text">Static</div>
<div class="clearboth"></div>
</li>
<li>
<div class="image"><img src="image.jpg" /></div>
<div class="text">Dynamic</div>
<div class="clearboth"></div>
</li>
<li>
<div class="image"><img src="image.jpg" /></div>
<div class="text">Dynamic</div>
<div class="clearboth"></div>
</li>
</ul>
One li with class static should NOT be sortable. The others should be sortable.
var el = document.getElementById('items');
var sortable = new Sortable(el, {
onUpdate: function (evt) {
var itemEl = evt.item;
// here happens some stuff
},
filter: '.js-remove',
onFilter: function (evt) {
// here happens some stuff
}
});
I know you can do it in jQuery UI sortable like this:
$( ".sortable" ).sortable({
cancel: ".static"
});
How can I do this in SortableJS?

Further to #BenG comment, you need to use filter instead of cancel.
var el = document.getElementById('items');
var sortable = Sortable.create(el, {
filter: ".static"
});
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<link href="http://rubaxa.github.io/Sortable/st/app.css" rel="stylesheet" />
<ul id="items" class="block__list block__list_words">
<li>item 1</li>
<li class="static">item 2</li>
<li>item 3</li>
</ul>

As Bob Stein mentionend in the comments:
You need to add both:
the filter: 'selector' property
the onMove: function (e) { return e.related.className.indexOf('static') === -1; } callback listener function
to completely prevent an element from being rearranged at the beginning or end of a list.
Working with multiple sortable instances:
If you have multiple lists, from which you can exchange elements, you would add the same code to the sortable instances. This is because a dragged element from another sortable instance does not call the callback functions of the sortable instance to be added, but those of its source sortable instance. See this example below:
var el = document.getElementById('items');
var sortable = Sortable.create(el, {
filter: ".static",
group: {
name: 'list'
},
onMove(e) {
return e.related.className.indexOf('static') === -1;
}
});
var items2 = document.getElementById('items2');
var sortable = Sortable.create(items2, {
filter: ".static",
group: {
name: 'list'
},
onMove(e) {
return e.related.className.indexOf('static') === -1;
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<link href="http://rubaxa.github.io/Sortable/st/app.css" rel="stylesheet" />
<ul id="items" class="block__list block__list_words">
<li class="static">FRUITS</li>
<li>Strawberry</li>
<li>Banana</li>
<li>Peach</li>
</ul><ul id="items2" class="block__list block__list_words">
<li class="static">COMPANIES</li>
<li>Microsoft</li>
<li>Apple</li>
<li>Intel</li>
</ul>

drag, drop and delete elements selectively with jquery ui

Good day all.
I have a simple interface, with 3 "zones". A list of elements that the user has, a place where the user can drag the elements he has and can sort them, and a place where the user can drag any element and if this element is from the second group, the element is deleted.
this is what I've done so far:
<div class="col-md-12">
<h1 id="trash" style="background:#f00;">drop here to delete (trash)</h1>
</div>
<div class="col-md-12">
<h1>take your elements from here (library)</h1>
<div class="group">
<ul class="playlists">
<li class="mymedia" data-id="1453">element 0</li>
<li class="mymedia" data-id="6565">element 1</li>
<li class="mymedia" data-id="1222">element 2</li>
<li class="mymedia" data-id="8888">element 3</li>
</ul>
</div>
</div>
<div class="col-md-12">
<h1>drop here your elements, and sort them (playlist)</h1>
<div class="group">
<ul class="playlists droppable" style="background:#777; min-height:30px;">
</ul>
</div>
</div>
and the javascript:
$('.droppable').sortable();
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
ui.draggable.remove();
}
});
https://jsfiddle.net/peorthyr/dfvxt8g7/
what i'm missing is a little tricky. I want that only the elements dropped into the playlist are deletable (by now, dragging any element into the trash, will delete it), while the elements into the "library" aren't deletable, but only draggable into the playlist. I've tryed this, but with no luck:
$('.droppable').sortable({
drop: function (event, ui) {
ui.draggable.addClass("deletable");
}});
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
ui.draggable.hasClass("deletable").remove();
}
});
what i'm mistaking? may I ask you help on this?

You could handle it adding a class and remove only element getting this class, e.g:
$('.droppable').sortable({
stop: function (event, ui) {
ui.item.addClass('dropped');
}
});
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
if (!ui.draggable.hasClass('dropped')) return false;
ui.draggable.remove();
}
});
-jsFiddle-

jQuery Drag and Drop with sortable UI not working

I'm currently trying to create a drag and drop, with sortable list items... But when I'm moving the draggable item towards the placeholder, it just returns to it's place. Any ideas what I'm doing wrong?
I found this method here, but it doesn't seem to work for me.
Here is my HTML:
<ul id="draggable">
<li class="to-drag" class="items">
<h1>1</h1>
<p>Description 1</p>
</li>
<li class="to-drag" class="items">
<h1>2</h1>
<p>Description 2</p>
</li>
<li class="to-drag" class="items">
<h1>3</h1>
<p>Description 3</p>
</li>
</ul>
<div style="height: 100px; clear: both;"></div>
<ul id="dropzone" class="items">
<li class="placeholder"></li>
</ul>
And this is the jQuery:
$(function() {
$("#draggable li.to-drag").draggable({
connectWith: "#dropzone",
helper: "clone",
revert: "invalid",
droppable: "drop"
});
$("#dropzone").droppable({
drop: function( event, ui) {
$(this).addClass("correct");
}
});
$("ul, li").disableSelection();
});
Thanks for the help! :)
EDIT
This is the working jQuery:
$(function() {
$("#dropzone").sortable({
revert: true,
opacity: 0.5
});
$("#draggable li").draggable({
connectToSortable: ".items",
helper: "clone",
revert: true,
opacity: 0.5
});
$("li.placeholder").droppable({
revert: false,
drop: function (event, ui) {
var dragging = ui.draggable.clone();
$(this).append(dragging);
}
});
$("ul, li").disableSelection();
});

You've got at least three major problems:
Draggable doesn't have connectWith, it has connectToSortable.
So you should change this. See doc:
http://api.jqueryui.com/draggable/
To use connectToSortable, you need a sortable, not at
droppable.
You'll need to change drop event for a sortable event, receive
maybe or update, depending on what you need.
http://api.jqueryui.com/sortable/
It could look like this:
$(function() {
$("#draggable li.to-drag").draggable({
connectToSortable: "#dropzone",
helper: "clone",
revert: "invalid",
droppable: "drop"
});
$("#dropzone").sortable({
receive: function( event, ui) {
$(this).addClass("correct");
}
});
$("ul, li").disableSelection();
});

Please see the changes I have made
$(function() {
$("#draggable li.to-drag").draggable({
appendTo: "body",
helper: "clone",
revert:"invalid"
});
$("#dropzone1").droppable({
drop:function( event, ui) {
alert(ui.draggable.text())
$("#dropzone").text( ui.draggable.text() ).appendTo( this );
}
});
$("ul, li").disableSelection();
});
The additional div ensures you are dragging on to the right panel
<ul id="draggable">
<li class="to-drag" class="items">
<h1>1</h1>
<p>Description 1</p>
</li>
<li class="to-drag" class="items">
<h1>2</h1>
<p>Description 2</p>
</li>
<li class="to-drag" class="items">
<h1>3</h1>
<p>Description 3</p>
</li>
</ul>
<div style="height: 100px; clear: both;"></div>
<div id="dropzone1" style="border:solid 1px">
<ul id="dropzone" class="items" >
<li class="placeholder"></li>
</ul>
</div>
Requires some tweaking to get some additional functionality but you should be able to do this
you will need additional code to do the sorting
Check out this link here
Cheers
Truez

jquery sortable ui remove item when is dragged to a specific div

I'm using jQuery sortable plugin
I have two blocks connected one is draggable and the other is only sortable.
What I want to do is when I'm dragging an item from the sortable in to a specific div to remove it.
Here's the markup:
<div>Draggable source items
<ul>
<li class="draggable" class="ui-state-highlight">Drag me down</li>
<li class="draggable" class="ui-state-highlight">Drag me down 2</li>
<li class="draggable" class="ui-state-highlight">Drag me down 2</li>
</ul>
</div>
<div>Sortable List 1
<ul class="sortableList">
</ul>
</div>
<div class="test">
<!--IF YOU DRAG THE ITEM fROM THE SORTABLE LIST HERE IT WILL REMOVE IT -->
</div>
JS:
(document).ready(function () {
$(".sortableList").sortable({
revert: true,
/*update: function (event, ui) {
// Some code to prevent duplicates
}*/
});
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid'
});
});
Here is a jsfiddle

how about this?
$('.droppableArea').droppable({
accept: 'li',
drop: function(event, ui) {
ui.helper.remove();
}
});
I marked your droppable DIV with 'droppableArea' class. See fiddle for details.

Get array of IDs after jQuery UI Sortable

I am using jQuery UI draggable and sortable functions and I am new to this.
I have list of items in left (generated from database ) and I have boxes on right where user can drag and drop them.
While/after dropping user can sort them.
Here is full preview : http://jsbin.com/oBeXiko/3
Problem: How can I get array of IDs of elements in each box after sorting?
I have tried .sortable("toArray") and sortable("serialize") but both return empty string.
Simple HTML
<div id="raspored">
<div class="left">
<ul id="kanta">Delete</ul>
<ul id="lista_predmeta" class="droptrue">
<li class="predmet ui-state-default" predmet-id="id_1">Item_1</li>
<li class="predmet ui-state-default" predmet-id="id_2">Item_2</li>
<li class="predmet ui-state-default" predmet-id="id_3">Item_3</li>
<li class="predmet ui-state-default" predmet-id="id_4">Item_4</li>
</ul>
</div>
<div class="right">
<ul class="raspored" razred="1">I</ul>
<ul class="raspored" razred="2">II</ul>
<ul class="raspored" razred="3">III</ul>
<ul class="raspored" razred="4">IV</ul>
</div>
</div>
My jQuery functions
$(document).ready(function() {
var url = "";
var raz = 0;
$( ".raspored" ).sortable({
cursor: 'move',
opacity: 0.65,
stop: function ( event, ui){
var data = $(this).sortable('toArray');
console.log(data); // This should print array of IDs, but returns empty string/array
}
});
$(".raspored").droppable({
accept: ".predmet",
drop: function(event, ui){
ui.draggable.removeClass("predmet");
ui.draggable.addClass("cas");
raz = $(this).attr("razred");
}
});
$(".predmet").draggable({
connectToSortable:".raspored",
helper: "clone",
revert: "invalid",
stop: function(event, ui){
var predmet = $(this).attr("predmet-id") ;
console.log( "PredmetID = " + predmet + " | RazredID = " + raz);
}
});
$("#kanta").droppable({
accept: ".cas",
drop: function(event, ui){
ui.draggable.remove();
}
});
$( ".raspored, .predmet, .cas, #kanta, #lista_predmeta" ).disableSelection();
});

When you call toArray, you can pass an options object with an attribute field. This attribute field defines what attribute is used in the toArray call. For example:
var data = $(this).sortable('toArray', { attribute: 'predmet-id' });
That will give you an array of the predmet-id attributes of the items. See the toArray documentation.
Note that the default attribute is id, which is why your array returned empty strings before - none of your elements have id attributes!

use serialize that work for me. below are sample code that may help you.
<ul id="sortable">
<li id="ID_11" class="ui-state-default">sai</li>
<li id="ID_21" class="ui-state-default">2</li>
<li id="ID_3" class="ui-state-default">3</li>
<li id="ID_4" class="ui-state-default">4</li>
<li id="ID_5" class="ui-state-default">5</li>
<li id="ID_6" class="ui-state-default">6</li>
<li id="ID_7" class="ui-state-default">7</li>
<li id="ID_8" class="ui-state-default">8</li>
<li id="ID_9" class="ui-state-default">9</li>
<li id="ID_10" class="ui-state-default">10</li>
<li id="ID_11" class="ui-state-default">11</li>
<li id="ID_12" class="ui-state-default">12</li>
</ul>
Save
<span id="categorysavemessage"></span>
Javascript code are :
<script>
$(function() {
$( "#sortable" ).sortable();
});
function saveDisplayChanges()
{
var order = $("ul#sortable").sortable("serialize");
var a = "hello";
var b = "hi";
$.post("update_displayorder.php?"+order+"&a=hello"+"&b=developer",{abc:a,xyz:b},function(theResponse){
$("#categorysavemessage").html(theResponse);
});
}
</script>
Php script for fetch order data with other info
update_displayorder.php script are :
<?php
echo "<pre>";
print_r($_REQUEST);
$newOrder = $_POST['ID'];
$counter = 1;
foreach ($newOrder as $recordIDValue) {
echo $counter .' '. $recordIDValue .'<br/>';
$counter ++;
}
?>