I think the error is actually from attaching sortable to each individual item that you're sorting. It should be attached to a container div. So, even though it looked like it was working, you were actually moving around a bunch of 1-item lists, which are always at index 0. I...

Many errors in the jsfiddle. First be sure to import the angular-ui-boostrap lib (http://angular-ui.github.io/bootstrap/) Then add ui.bootstrap as a dependency of your angular module: ['ui.sortable', 'ui.bootstrap']); Finally, you need to inject the $modal service into your controller: app.controller('MainCtrl', function ($scope, $modal) {...} ...

I'm not sure exactly what else you're trying to achieve in terms of the "disabled" style CSS, but I just forked and monkeyed around with this for a minute: jsfiddle One thing is that I think your jQuery methods are redundant. Why say: $(".task-container").contents().find(".todo-task").draggable( ...etc. When you can just as...

I recently found an answer: i make a droppable zone on my accordions h3 and divs, and the sort does nothing on "receive" $("#dvAccordian > div,#dvAccordian > h3").droppable({ drop: function (event, ui) { divornext = $(this); if ($(this).is("h3")) { /*dropped on a header :)*/ divornext = $(this).next("div"); //we get the...

I believe that this was a bug in the nestedSortable library. There's a commit on the git repository that says it should fix that bug (https://github.com/ilikenwf/nestedSortable/commits/2.0alpha), so try upgrading to the latest version and see if that fixes your problem. UPDATE: In fact, modifying your CodePen to use the latest...

This should do the trick $('#drag').sortable(); $(document).on('click', '#drag div', function (e) { $(this).parent().appendTo('#drag'); }); http://jsfiddle.net/7PDav/ You basically take and re-append the clicked item. The append will put it at the end....

The column count is determined by the width CSS property of the #sortable ul. For example, changing this from 450px to 540px will add another column. The width of the li elements also determines how many columns will be displayed. So there's no option or anything like that, it's entirely...

I think you've fooled yourself into thinking that Angular is managing this list for you (and me too, for the past hour ;) ). Because of the jQuery plugins you're using, the DOM for that sortable <ul> doesn't appear to be under Angular's control anymore. They probably re-rendered something at...

When the page loads the jQuery binds to the id. When you call you Ajax and refresh the content on the page you lose the bind. You have two options to fix this. The first is to call the bind again at the end of the Ajax call. E.g.: $.ajax(function()...

Vickel's answer is solvin my problem almost completely. The only thing that is a bit "ugly" with his solution is that there is no visual feedback during dragging on whether the current position is valid or not. So I went for the following solution: beforeStop: function(event, ui) { if(ui.placeholder.index() ==...

Do you need a cipher, that could be decrypted only with a secret key or do you just want to change a filename to a unreadable string of alphanumeric characters? Second option is easier, you can use php functions: base64_encode and base64_decodde. If you want your file names to be...

I ended up solving this issue by completely removing the droppable zone and jQuery .droppable call from the script entirely and relying only on .draggable and .sortable. You can view the finished working demo here: http://jsfiddle.net/hurq5qre/ I needed to ad some min-height to the sortable container in order to create...

I don't know if this is actually not supported but I don't think you should be trying to post stringified data in the URL. You could very easily end up with a huge URL! Why not POST the required data using $.post instead of updating the URL? Or if that...

Maybe you can use the change( event, ui )Type: sortchange This event is triggered during sorting, but only when the DOM position has changed. http://api.jqueryui.com/sortable/#event-change or if that didn't work, here is the complete list of options. http://api.jqueryui.com/sortable/ UPDATE see this post. jquery Sortable connectWith calls the update method twice...

To my equal frustration and relief, this was a bug. I ran several simultaneous tests through versions v1.1.1 and v1.2.0 to conclude that something wasn't behaving the way it was intended and filed a bug report. The author of the library responded with an updated v1.2.1 that has removed the...

.sort expects you to return a value less than 0 (a less than b), 0 (equal) or a value greater than 0 (a greater than b). Simply returning the result of a > comparison will yield a boolean. Change your code accordingly: return parseInt(a.id, 10) - parseInt(b.id, 10); ...

I finally figured it out. It was an end-case error (in coding, there are never any errors in the middle of a problem, only at its ends), I wasn't dealing properly with sorting keys into sortedKeys when first starting out (i.e when sortedKeys has zero or one members). I fixed...

After enough tinkering I managed to come up with a more suitable solution... Seeing I'm only really focusing on the prevention of files being dropped into sortable area, I decided to focus on determining the nature of the item being dropped... drop = $(".all-slides"); drop.on('dragover', function(e){ e.preventDefault(); }); drop.on('dragenter', function(e){...

The onDrop function needs you to do certain things. From http://johnny.github.io/jquery-sortable/#nested onDrop: function (item, container, _super) { container.el.removeClass("active") _super(item) } It looks like super is a callback that needs to be called if you override onDrop. Replace your onDrop function with this and it works. http://jsfiddle.net/xdjn2wqp/2/ The best way to...

If I'm understanding this correctly you want to loop through the docs, and then loop through the forms for each doc. Will this work instead? foreach($_POST['doc'] as $doc) { foreach($_POST['form'] as $form) { echo $sql="INSERT INTO addnewdoc(doc_id,form_id) VALUES ($doc,$form)"; $res=parent::_executeQuery($sql); } } That ends up running an insert query for...

If you saved it as an html file and opened the file in the browser, the url will be something like 'file:///C:/temp.html'. The script references used in the file are in the format of '//code.jquery.com/jquery-1.10.2.js', meaning if your url is http then they'll use http, if it's https, they'll use...

First of all, you shouldn't simply append clones of an element having id attribute, which will result in multiple elements having the same id which is invalid. So, we can remove the id while cloning and use a data-* attribute instead to group similar elements: ui.item.removeAttr("id").attr("data-id", idel).clone().appendTo('#second, #third').addClass('draggable1'); Now, when...

Adding this to your code should do it: $('.section-sortable').keydown(function(e){ if (e.keyCode == 65 && e.ctrlKey) { e.target.select() } }) It basically listens to keydown event on your section and if the keydown detects a Ctrl-A it "selects" the target. Fiddle...

I would check on each sort to see if the whole list was in order. Just checking the last element dosen't seem enough. http://jsfiddle.net/fdWP9/ $("#sortable").sortable({ stop: function( event, ui ) { var inorder = true, $kids = $(ui.item).parent().children(), current = null; $($kids).each(function() { if (current) { if ($(this).text() < current)...

You can fetch the 'id' , 'index' map of sortable by iterating through all the items in sortable , $.map($(".widget-container-col > .widget-box "), function(element) { return element.id + ' = ' + $(element).index(); }); Which will return you data in following form , ["2 = 0", "1 = 1"] See...

So here is my "Ah-Ha" moment. It was doing what it was supposed to do looking for the item and showing it and if it was not the item it wouldn't show it. however when the item moved to the other column using sortable it still had the same class...