jquery-ui-sortable

Click on jQuery Sortable list does not blur input

╄→гoц情女王★ 提交于 2020-01-01 05:39:11
问题 I can blur my input by clicking anywhere on the page except the jQuery Sortable list. How can I fix this? UPD: demo 回答1: $('sortable').mousedown(function(){ document.activeElement.blur(); }); 回答2: Take a look at the cancel option from the jquery-ui $("#sortable").sortable(cancel: 'input'); You'll have to remove the $("#sortable").disableSelection(); See my jsfiddle UPDATE I understand your problem. Because jQuery stops the default functionality of the browser when sorting a list, the blur is

Firefox 4 Issue with jQuery UI Sortable

夙愿已清 提交于 2019-12-31 07:05:33
问题 After upgrading from Firefox 3.6 to FF4 i was surprised to see that jQuery UI Sortable has stopped working (I am using jQuery (1.4.2) with jQuery UI (1.8.5)) and i get this error (from firebug) this.helper is null dev/js/jquery-ui-1.8.5.custom.min.js Line 264 I've had a look around but not found any reason for this error. I even upgraded jQuery UI to the latest version (1.8.11) but that did not help. If anyone has any insight why this is happening (or a fix) i would greatly appreciate your

jQuery UI sortable - do something when item is dragged

人走茶凉 提交于 2019-12-31 06:52:06
问题 I have two block one is "draggable" and the other is "sortable". What I want to do is when I start dragging an item from "sortable" to do something via jQuery. Here's my JS: $(".sortableList").sortable({ }); $(".draggable").draggable({ connectToSortable: '.sortableList', cursor: 'pointer', helper: 'clone', revert: 'invalid', start: function (event, ui) { $(this).addClass('testing'); } }); Here's a jsbin Any ideas how can I do this? 回答1: You have to add update event at sortable like this : $("

How to programmatically trigger the update callback of a sortable widget with a button?

穿精又带淫゛_ 提交于 2019-12-30 04:16:07
问题 According to this jsbin i have a sortable list and a button . when click on button something add to sortable and i want to know which event of sortable is fired?(update,receive) and when finding the event do something on that event. for example if user click on add button i want to know which event is fired and doing something on event . for example if update fire i do some thing in update method of sortable $('.sort').sortable({ update:function(){ //if update fire do some thing } }); $('#add

Cancel dragging of a sortable item

天涯浪子 提交于 2019-12-30 02:40:11
问题 An absolutely common sortable case: <script> $(function() { $("#sortable").sortable(); }); </script> <ul id="sortable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Problem. Need to cancel dragging of an item on some condition and there is a good advice of Andrew Whitaker, but that approach is working only for jquery-ui-draggable and fails for sortables: $("#sortable").sortable({ start: function() { return false; // will still cause `this.helper is null` } }); Will be greateful for

Jquery Sortable and Draggable between parent and child frame

不打扰是莪最后的温柔 提交于 2019-12-29 07:50:20
问题 I am trying to implement jQuery Draggable|Droppable|Sortable between a parent and child frame. I have a this prototype but there is some weird behavior happening win = document.getElementById('frame').contentWindow; element = win.document.getElementById('sortable'); $(element).sortable(); console.log(element); $( "#draggable" ).draggable({ connectToSortable: $(element), iframefix: true, helper: function() {return $("<div/>").css('background-color','red');} }); The iframe page also contains $(

jquery .sortable() on <div>

北慕城南 提交于 2019-12-29 06:34:27
问题 I am trying to let user sort this kind of markup <div id="steps"> <div class="sort"> <span></span> <textarea/> </div> <div class="sort"> <span></span> <textarea/> </div> <div class="sort"> <span></span> <textarea/> </div> <div class="sort"> <span></span> <textarea/> </div> </div> And i am trying like this: $('.sort').sortable({placeholder: "ui-state-highlight",helper:'clone'}).disableSelection(); But i am getting very unexpected behavior, please check: http://jsfiddle.net/GA4Qs/8/ how can i

Draggable and droppable by clicking <a> element. Sorting the droppable table without adding more <a> element

梦想与她 提交于 2019-12-25 14:08:53
问题 I used bootstrap css and JqueryUI to create a list in draggable <ul> and made a <div> as droppable area. Now the drag and drop both work properly. <ul id="showdata" class="list-group ui-helper-reset ui-droppable" style="overflow: auto; height: 200px; display: block;"> <li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a> </li> <li class="list-group-item ui

Sort Div Elements that are stored in a variable using jQuery

梦想的初衷 提交于 2019-12-25 07:24:59
问题 I have a HTML dom element stored in a variable. The HTML is generated from handlebar.js & from JSON data using jQuery. I need to sort this according to values from CSV var html = "<div id = 'qual'>Qual</div> <div id = 'exp'>Exp</div> <div id = 'ExcludeFromSorting'></div> <div id = 'edu'>Edu</div> <div class='clear'></div> <div id = 'int'>Int</div> <div id = 'ref'>Ref</div> <div id = 'img'>Img</div> <div id = 'obj'>Obj</div>"; The HTML is usually be complex, usually be more than 200 lines of

How can I make a draggable item's style match the target using the custom helper or any other method?

最后都变了- 提交于 2019-12-24 21:05:45
问题 Using the example here as a starting point, I set out to customize my draggable and sortable data. In the linked example, we have simple text in the draggable. I replaced it with a select tag. When dragging the select element into the sortable, I would like to use only the value of the selected option when moving it to the sortable list. To this end, I use the custom helper, but unfortunately, as soon as I drop it, it turns into a select element again. $("#draggable").draggable({