buttons gets repeated on every sorting of an item? - javascript

I doing sorting of items and i want to show update button when sorting is done, when i have tried getting buttons repeated on number of time i am dragging and dropping the item.
here is my code what i have tried.
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div align="center" id="sortOrder"></div>
<script>
$(function(){
$( "#sortable" ).sortable({
placeholder:"sortable-placeholder",
update: function( event, ui ) {
console.log($("#sortable").sortable("toArray",{attribute:"pageid"}));
},
stop: function(event, ui){
showButton();
}
});
$("button").click(function(){
var order = $("#sortable").sortable("toArray",{attribute:"pageid"});
$.post(
"/page.cfc",
{method:"Ordering",data:order}
);
});
});
function showButton(){
var field = '#sortOrder';
$node = '<button type="submit">Update</button>';
$(field).after($node);
};
</script>
can anyone tell me what's wrong with this code ? THanks

showButton is constantly adding a new button element, so every time it gets called, it will add the button.
You might just want to use $('button').show() and .hide()

Related

JQ Selectable Cancel Selected in Selecting Event

I'm using jQuery Selectable and would like to know whether is it possible to prevent Selected event to be triggered from Selecting event?
Actually, I want to show some popup/confirmation in Selecting event, and if user confirms that then I would like the Selected event to be triggered.
Any solution or workaround(or alternative) would be highly appreciated.
You can do it like this:
HTML
<ul id="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<input id="btnGet" type="button" value="get selected items" />
JS
$("#selectable").selectable({
selected: function(e, ui) {
if (confirm('Are you sure to select ' + $(ui.selected).html() + '?')) {
$(ui.selected).addClass("ui-state-highlight");
} else {
$(ui.selected).removeClass("ui-state-highlight");
}
}
});
$('#btnGet').click(function() {
var selectedItems = [];
$('.ui-state-highlight').each(function() {
selectedItems.push($(this).html());
});
alert(selectedItems.join(','));
});
Online demo (jsFiddle)

JQuery UI sortable adds an element?

I'm trying to use JQuery UI's drag/drop with sortable. When you sort the elements in a "drop zone", it appears to add another (null) element.
HTML
<ul id="sortable" class="drop">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
JS
$("#sortable").sortable();
$( '.drop' ).droppable({
drop: function (event, ui) {
document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length;
}
});
You can try it out here: https://jsfiddle.net/udj6p93f/2/
Go ahead and sort the elements and you'll that length becomes 6, even though there are only 5 elements. What's going on here?
I have copied this line
document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length;
just after
$("#sortable").sortable();
It's 5. And inspected element, drag and drop 1 element. It adds one more list item.
<li class="ui-sortable-placeholder ui-sortable-handle" style="visibility: hidden;"></li>
I think that happens because of this.
Fix suggestion:
$("#sortable").sortable();
$( '.drop' ).droppable({
drop: function (event, ui) {
document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length - document.querySelectorAll('#sortable li.ui-sortable-placeholder').length;
}
});

jQuery Multi-Select Dragable / Sortable

I am working on a drag & drop page which allows a user to pick fields from a source list and drop them in their choice of a destination list.
While this functionality is working on a high level, I am trying to make the experience a little better by allowing for multiple fields to be selected at the same time and moved.
Sortable:
$('#in_available_fields').sortable({
connectWith: '.sortable-list',
placeholder: 'placeholder',
start: function(event, ui) {
if (!$(ui.item).hasClass("allowPrimary")) {
$(".primaryPanel").removeClass('panel-primary').addClass("panel-danger");
}
if (!$(ui.item).hasClass("allowSecondary")) {
$(".secondaryPanel").removeClass('panel-primary').addClass("panel-danger");
}
if (!$(ui.item).hasClass("allowExport")) {
$(".exportPanel").removeClass('panel-primary').addClass("panel-danger");
}
checkFields()
},
....
Dropzone:
// Enable dropzone for primary fields
$('.primaryDropzone').sortable({
connectWith: '.sortable-list',
placeholder: 'placeholder',
receive: function(event, ui) {
// If we dont allow primary fields here, cancel
if (!$(ui.item).hasClass("allowPrimary")) {
$(ui.placeholder).css('display', 'none');
$(ui.sender).sortable("cancel");
}
},
over: function(event, ui) {
if (!$(ui.item).hasClass("allowPrimary")) {
$(ui.placeholder).css('display', 'none');
} else {
$(ui.placeholder).css('display', '');
}
},
....
My thought, to make it clear to users would be to add a checkbox before the label on each field. This way they could check multiple at one time and then when they drag them over, it would move all of the selected ones.
Any thoughts on the best way to approach this? I struggled to get this far with the drag and drop and I am a little unsure on how to come up with a multi-select feature for this.
Fiddle: https://jsfiddle.net/839rvq2k/
You can refer to this fiddle for the multisortable feature of library here
Extends jQueryUI sortable to allow selection and sorting of multiple
elements https://github.com/shvetsgroup/jquery.multisortable
JS:
$(function(){ $('ul.sortable').multisortable(); });
Html:
<h2>List 1</h2>
<ul id="list1" class="sortable">
<li>Item 11</li>
<li>Item 12</li>
<li class="child">Item 12a</li>
<li class="child">Item 12b</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
</ul>

How do I stop an item being sortable in a jquery UI sortable list?

I have a list, some items with a class "sort":
<ul id="items">
<li class="sort">ITEM 1 Fix Position</li>
<li class="sort">ITEM 2 Fix Position</li>
<li class="sort">ITEM 3 Fix Position</li>
<li class="sort">ITEM 4 Fix Position</li>
<li>ITEM 5</li>
<li>ITEM 6</li>
<li>ITEM 7</li>
<li>ITEM 8</li>
</ul>
I have then initialised the list as sortable for all items with the class "sort".
$("#items").sortable({
items: "li.sort"
});
This works fine, however, I want to be able to fix the position of the sortable items so that they can no longer be dragged. I've started by adding a button to remove the class "sort" from the list item. This is the code for the button:
$("#items").on("click", ".fix-position", function(e){
e.preventDefault();
$(this).parent().removeClass("sort");
$(this).remove();
});
This does prevent the other items from using it as a drop target, but the item can still be dragged itself. See JS FIDDLE: http://jsfiddle.net/3Js5u/1/
I have also tried to refresh the list:
$("#items").sortable("refresh");
but that does not seem to work.
Only other option I can think of is to destroy the sortable list and recreate it like this:
$("#items").sortable( "destroy" );
$("#items").sortable({
items: "li.sort"
});
JS FIDDLE for that option: http://jsfiddle.net/3Js5u/3/. Not sure if that's the best way to go though. Any help appreciated. Thanks.
Do the opposite and use cancel option instead.
HTML:
<ul id="items">
<li>ITEM 1 Fix Position</li>
<li>ITEM 2 Fix Position</li>
<li>ITEM 3 Fix Position</li>
<li>ITEM 4 Fix Position</li>
<li class="static">ITEM 5</li>
<li class="static">ITEM 6</li>
<li class="static">ITEM 7</li>
<li class="static">ITEM 8</li>
</ul>
JavaScript:
$("#items").sortable({
cancel: ".static"
});
$("#items").on("click", ".fix-position", function(e) {
$(this).parent().addClass("static").end().remove();
e.preventDefault();
});
DEMO: http://jsfiddle.net/3Js5u/2/

How to drag items between 2 sorted lists with jQuery?

I'm trying to implement drag/drop/sort between 2 list elements:
<ul id="first">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul id="second">
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
Basically I just want to be able to pass items between the lists and sort the items in each list. What's the simplest way to implement this using jQuery?
jQueryUI Sortable - this is exactly what you want.
Very simple:
<script>
$(function() {
$('#first').sortable( { connectWith : '#second' });
$('#second').sortable( { connectWith : '#first' });
});
</script>
I've noticed that an earlier version of jQuery-UI (1.6rc5) I tried this with didn't accept the css selector for connectWith. I threw a curve and got it to work with actual jQuery elements instead:
<script>
$(function() {
$('#first').sortable( { connectWith : $('#second') });
$('#second').sortable( { connectWith : $('#first') });
});
</script>

Categories

Resources