w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
jQuery UI Sortable: Trying to setup sortable but it seems the empty container does not take
Your sortable columns have to be aware of each other. Here is a demo of how to do it: fiddle An example from jQuery api docs Code: $( '.wrapper .row' ).each( function() { var column = $( '.column', this ); column.sortable( { items: '.item', connectWith:".column" } ); } );

Categories : Jquery

jQuery Sortable: Restrict Column Height
How about this using jqueryUI - Grid and wrapping your elements with a <div> of fixed height http://jqueryui.com/sortable/#display-grid Here is the sample for 2X2 grid http://jsfiddle.net/JavaKB/CsFpn/1/

Categories : C#

Using jQueryUI sortable and draggable causes container inline-block elements for sortable element to jump
As mentioned in comments, this solution works for you. I basically changed your structure from display: inline-block; to float: left;

Categories : Jquery

Nested sortable in jquery
@JasonP provided an answer in the comment above. The third line of code should be: $( ".sortable" ).sortable({ items: "> li.s", connectWith:'.sortable' }); Added the connectWith option. I'm not sure why it worked previously without it.

Categories : Jquery

JQuery Sortable - Nested Handle
Try to wrap your nested html to <li> tags inside <ul> and make ul as sortable. Also take a look at items option on jquery.ui sortable widget: $( ".selector" ).sortable({ items: ".row" });

Categories : Jquery

jQuery Sortable not working for nested elements
This blog post looks like it covers a similar issue and resolves it. It's based around lists instead of divs but the code should still apply jQuery UI nested sortables

Categories : Jquery

jQuery or JavaScript nested sortable with top-level restrictions
I would think that Jquery UI should be able to handle this. Their sortable has ways of restricting what can be sorted. http://jqueryui.com/sortable/#items

Categories : Javascript

Jquery UI sortable issue: image invisible after drop on the dynamically created sortable (both uls have same parent div)
My guesses are that the ul is 'hiding' the element.. as you drag it around you can still see the image until the border of the ul.. I think you need to use divs or spans and make use of the draggable of jQuery ui..

Categories : Jquery

jquery swap nested divs content in container
attach the following function to the click event of your button : function handler() { $('.element').each(function(){ var temp = $(this).find('.nameP').text(); $(this).find('.nameP').text($(this).find('.nameE').text()); $(this).find('.nameE').text(temp); }); }

Categories : Jquery

jquery sortable: How to sync 2 sortable lists?
This is a really bad hack, but it may give you a few ideas to start out on: Working Example $(function () { $('#sortable').sortable({ update: function (event, ui) { var x1 = $('#X1').position().top +140, x2 = $('#X2').position().top +140, x3 = $('#X3').position().top +140; $('#sortable2 li').css({ position:'absolute', width: $('#sortable li').width() }); $('#Y1').animate({ 'top': x1 }); $('#Y2').animate({ 'top': x2 }); $('#Y3').animate({ 'top': x3 }); } }); $("#sortable").disableSelection(); }); I say this is a really

Categories : Jquery

Sortable images with jquery sortable in HTML
You need to assign the id to the tr and the class to the td DEMO jsFiddle $(function(){ $('#comparison').sortable(); })

Categories : Jquery

dragging DIVs to horizontal sortable container
Take a look at this fiddle. I'm not quite sure what you are asking, but this is a good example of drag and drop capabilities. I can't comment, and I am not quite sure what you are asking. But best of luck to you! http://jsfiddle.net/cuhuak/4CHDZ/ function FieldType(typeName, name) { var self = this; self.TypeName = ko.observable(typeName || ""); self.Name = ko.observable(name || this.TypeName()); self.createField = function () { return new Field( { Name: this.Name(), TypeName: this.TypeName() } ); } self.onDragStart = function(event, ui) { dropFieldType = ko.utils.domData.get(this, "ko_drag_data"); }; self.onDragStop = function(event, ui) { dropFieldType = null; };

Categories : Javascript

jQuery UI Sortable - Error: cannot call methods on sortable prior to initialization; attempted to call method 'disable'
Calling a .sortable() on any element makes the children of that elements sortable. That does not mean that the children are also initialized with the .sortable(). They are just a part of a sortable container which can be dragged around. And since you are calling .sortable('disable') on the child elements, it will give an error since the .sortable() was called on the parent and not the children. And the way you are disabling is also incorrect. Make use of the cancel property to exclude those elements from being sorted. Add this option wherever you are initializing your sortable. $("#avail_list").sortable({ cancel: ".disable-sort" }); And add that class to those elements that you want to disable. function disableDraggable(elements){ for (var i = 0; i < elements.length; i++)

Categories : Jquery

jquery sortable: The dropped sortable list item should have a class applied removing similar class in other items
Use .siblings() $( "#sections" ).sortable({ stop: function( event, ui ) { $(ui.item).addClass("selected").siblings().removeClass('selected'); } }); demo

Categories : Jquery

Knockout.js nested sortable bindings
I don't know your exact structure, but you can use the connectClass option to control which sortable lists are connected. For example, if you did this: <ul data-bind="sortable: { data: buckets, connectClass: 'buckets' }"> <li> <span data-bind="text: name"></span> <ul data-bind="sortable: { data: items, connectClass: 'items' }"> <li data-bind="text: name"></li> </ul> </li> </ul> You would only be able to drop a bucket within buckets and an item within items. The plugin automatically adds the class to the parent element. Here is a sample: http://jsfiddle.net/rniemeyer/YaLgL/ If you did not want to be able to sort items between buckets, then you could apply a unique connectClass to ea

Categories : Knockout Js

nested sortable not working(no drag and drop)
You should put the following section inside the document ready: $('ul').disableSelection().sortable({ so that it becomes: function mkUl(){ $("ul").each(function(){ $(this).removeAttr("class"); var ulLevel = $(this).parents('ul').length+1; $(this).addClass("ui-sortable no-child level_"+ulLevel); var childC = $(this).children("li").size(); $(this).has("li").removeClass("no-child").addClass("child children-"+childC); $(this).children("li:first").addClass("first"); $(this).children("li:last").addClass("last"); }); } $(document).ready(function(){ mkUl(); $('ul').disableSelection().sortable({ connectWith: "ul", tolerance: "pointer", cursorAt: { left: 40, top: 20

Categories : Javascript

jQueryUI Sortable + Draggable and fixed position with overflow auto - can't drag items into sortable
The problem is not the overflow, but the fact that the draggable items are taking the 'left' div as container and thus cannot be dragged outside of it. Try setting the containment property to your section element.

Categories : Jquery

Knockout sortable lists in a sortable parent list
you can use the connectClass option on a sortable binding to restrict which other sortable's that you can drop the item into. The markup would look something like: <ul data-bind="sortable: { data: parents, connectClass: 'parentItem' }"> <li> <span data-bind="text: name"></span> <ul data-bind="sortable: { data: items, connectClass: 'childItem' }"> <li data-bind="text: name"></li> </ul> </li> </ul> The connect class is added automatically to the element that is bound, so you do not need to do anything else. Here is a sample: http://jsfiddle.net/rniemeyer/xJYPh/

Categories : Javascript

How to set nested DIV height same as container?
You can do it directly with HTML/CSS <table cellpadding="0" cellspacing="0" style="background-color:Aqua"> <tr> <td> <span style="height:100%; display:inline-block; width: 100%; background-color:Yellow"> Navigation </span> </td> <td> Content<br />Content<br />Content<br />Content<br /> </td> </tr> </table>

Categories : Javascript

JQuery ,each() with UI.sortable()
It looks like you aren't executing the code to do the prioritization after you sort. http://jsfiddle.net/3CWBt/ $(function(){ $("#priority-list").sortable({ stop: setPriority }); setPriority(); function setPriority() { $("#priority-list li").each( function(i){ $(this).attr("data-priority", "pri-" + (i + 1)); }); } });

Categories : Javascript

jQuery slider and sortable used together
The problem is, you have a very strange html structure for your sortables. The <li> elements are removed from the surrounding <div>s on sorting and because you use ids in the slider code, this gets messed up. You should simplify your html by just using an <ul> with <li> in it for the sortables. You should leave out all the <table> and <div> stuff (this is invalid html by the way!). Then, instead of doing if (score>=1) {$("#td1").removeClass('cellgray').addClass('cellred'); $("#td2").removeClass('cellred').addClass('cellgray');} in the slider code, you should iterate over the children of the sortable container (<li> dom elements) and activate/deactivate them depending on the slider value. So do not use the ids of the elements there, as they m

Categories : Javascript

How do you detect changes in the DOM with jQuery UI Sortable?
Here's starting point for you: http://jsfiddle.net/XsUCv/ The JS is: $("#sortable").sortable(); $("#sortable").disableSelection(); $('input').on('click', function () { var sortedIDs = $("#sortable").sortable("serialize"); alert(sortedIDs); }); You'd then need to store the serialized order. When the page is next loaded the order should be fetched from the db and the <li>s printed in the order they were saved in.

Categories : Javascript

jQuery UI Sortable animations
Here's how I did it: // needed to allow for multiple placeholders as they animate var placeholderNumber = 0; $('#new-ct-banner-tree').sortable({ // basic setup distance: 15, placeholder: 'tree-drop-placeholder', items: ".tree-item:not(.new-ct-tree-group-item, .group-add-button)", connectWith: ".connectedSortable", handle: ".top-drag-handle", helper: "clone", opacity: 0.75, revert: 300, scrollSpeed: 4, cursor: "move", start: function(event, ui) { // When starting the drag, add our replacement placeholder. We set the height of the default placeholder to 30px (see css below), so the replacement needs to be that same height and the original gets a negative margin of that height and our replacement consumes the original. $(ui.pl

Categories : Jquery

Jquery draggable sortable
Put the connectToSortable in your draggable function. jQuery Part: $("#container").sortable({ receive: function(event,ui){ ui.item.remove(); } }); $("#element-container").draggable({ connectToSortable: "#container", helper: "clone", revert: "invalid" }); HTML Part: //First <div id="container"></div> //Second <div id="element-container"></div>

Categories : Jquery

Using jquery sortable with ajax and php
Your problem is that you are trying to assign a serialized array, to a single query string parameter, which will yield an incorrect query string. Try passing the serialized list as returned by the plugin serialize method like so: $.ajax ({ type: "POST", url: templateDir + "/inc/changeSortOrder.php", data: order + "&sort=1&sort_table=" + table, dataType: "json", cache: false, success: function(data) { console.log(data); } }); And then access the passed list in php with: $list = $_POST['nationality'];

Categories : PHP

Partial jQuery sortable
You can just sort elements in the second list upon "sortupdate" event: Demo $("#unsortable_list").on("sortupdate", "", function(event, ui) { var $list = $(this).children("li"); $(this).append($list.sort(sortByHtml)); }); If one tries to reorganize elements in the second list - they will just bounce back to alphabetical order. Pure dragging of elements in the second list should not be disabled, because one might want to drag them back to the first list.

Categories : Jquery

jQuery UI - Sortable flies in from top
Removing the CSS won't remove the issue, unless it was all being done with CSS transforms. Posting the actual code somewhere would be ideal, as we could take a look and help identify the real issue. Does the issue remain if you remove the FuelUX wizard entirely from the page?

Categories : Jquery

JQuery UI, sortable and selectable
I managed to get it somewhat working. Check the fiddle. Basically, I used the jquery.multisortable plugin which extends the default sortable widget. This way, you can select multiple items by Ctrl+clicking them. You can drag to re-order and/or move items between lists. Alternatively, if you want to stick to your original mechanism with selection rectangles and drag handles, you can still use selectable (demo). The only downside is that the multiselectable behaviour behind multisortable stays active, which means that it still attempts to handle Ctrl+clicks (but fails). It's just a minor nuisance and you can probably tweak the code of multisortable so it does not extend multiselectable which should solve this.

Categories : Jquery

Draggable and sortable element jquery
I think you can use here nestedSortable. NB: Although it does not seem to be maintained anymore, we've been using it for 1 year and it proved to work very well. The configuration options are pretty similar with sortable's and draggable's.

Categories : Jquery

jQuery UI sortable not working in iPAD
OK, It is obvious, because jQuery UI library does not include the touch events. If you develop a jQuery powered web site, with using jQuery UI functionalists some of are wont work in touch enable mobile devices. In your case that you have used sortable() method is good example. There is a simply solution you can implement. you can use a jQuery UI Touch Punch plugin for overcome this issue (As you used). Please make sure that your jquery.ui.touch-punch.js file load or not. I think if it is loading correctly it should work. Also you can clear the browser cache. (in iPad Settings > Safari > Clear Cookies and Data) Here is the working example : <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">

Categories : Jquery

Jquery ui sortable drop event
I could solve the problem with jQuery UI Sortable stop event. $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); $( "#sortable" ).sortable({ stop: function( ) { var order = $("#sortable").sortable("serialize", {key:'order[]'}); $( "p" ).html( order ); } }); });

Categories : Jquery

Jquery UI sortable with bootstrap bugs
Seems like an issue with a placeholder. I have added margin fix to it: .ui-sortable-placeholder { margin-left: 0 !important; } Seems to be okay now. Demo And for sorting between lists you can use connectWith.

Categories : Jquery

jQuery UI Sortable with minimize and maximize
Give an ID to feed div and add this 3 lines, DEMO http://jsfiddle.net/yeyene/7DM3Q/2/ // to open only feed $('.portlet-content').css({'display':'none'}); $('#feed .portlet-content').css({'display':'block'}); // to change plus icon of feed $("#feed .portlet-header span").removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick"); JQUERY $(function () { $('.portlet-content').css({'display':'none'}); $('#feed .portlet-content').css({'display':'block'}); $(".column").sortable({ connectWith: ".column" }); $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".portlet-header") .addClass("ui-widget-header ui-corner-all") .prepend("<span class='ui-icon ui-icon-minusthick'></span>")

Categories : Jquery

kineticjs analog for jquery sortable
Here is a script that lets users sort list-items in a Kinetic List by dragging Before: This illustration below shows the user dragging item#1 to the bottom of the list. After: This illustration shows how the list redraws automatically in newly sorted order. The data content of each List-Item is stored in an array of item objects: If you need more item data, just add that data to the list-item objects // array of item objects var contents = []; // item objects contain a text label // and a reference to the Kinetic Group that displays this item contents.push( { text: ”I’m list-item#1”, kItem: KineticGroup#1 } ); After the user drags a list-item to a new location, the entire list is resorted. The resort order is based on the “Y” coordinate o

Categories : Javascript

Jquery UI sortable inside contente
No you cant do this using sortable. For sortable, only the immediate child elements of a sortable container can be dragged, in your case, the li. You need to use draggable and droppable. make your divs draggable and your li's droppable

Categories : Jquery

Jquery UI Sortable - Div scroll issue
Change your style sheet like bleow: .scroll { border: 1px solid red; height: 200px; overflow: auto; position: static; width: 150px; } And use this code upper of your ul: <div style="overflow:hidden;width:150px;height:200px;position:relative">

Categories : Jquery

Show Hide with jQuery UI Sortable
If you're looking to use the whole title bar and not just the +/- icon, change: $(".portlet-header .ui-icon").click(function () { $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); $(this).parents(".portlet:first").find(".portlet-content").toggle(); }); to $(".portlet-header").click(function () { $(this).find('.ui-icon').toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); $(this).parents(".portlet:first").find(".portlet-content").toggle(); }); jsFiddle example

Categories : Jquery

jQuery sortable can't drag from a handle
That kinda defeats the purpose. A handle is a certain area inside the draggable element that works like a ... wait for it .... handle. Using the entire element as a handle makes no sense, as you could do that by just calling sortable without a handle : $(".con").sortable(); and the entire element would be the handle by default. If you really want a handle, you need to define that handle as a certain area inside the element, like so: <div class="con"> <div><span class="handle">X</span>handle</div> <div><span class="handle">X</span>handle</div> <div><span class="handle">X</span>handle</div> <div><span class="handle">X</span>handle</div> </div> FIDDLE

Categories : Jquery

Jquery UI combine sortable and draggable
Change your code to this should do the trick: obj.removeClass('draggable').addClass('editable').removeAttr('style'); //obj.addClass('droppable'); $(this).append(obj); check on fiddle: http://jsfiddle.net/dmUKY/11/

Categories : Jquery

Jquery UI sortable state on mouseup
You likely need to use a stop function like this: Working Example $(function () { $("#sortable").sortable({ stop: function (event, ui) { //important bit alert($('#sortable').find('li').text()); } }); $("#sortable").disableSelection(); }); Or an update function like this: $(function () { $("#sortable").sortable({ update: function (event, ui) { //important bit alert($('#sortable').find('li').text()); } }); $("#sortable").disableSelection(); }); Working Example 2

Categories : Jquery



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.