I have a draggable connected to a sortable:
$("#panelTarget").sortable({
distance: '15'
});
var element = $('<li>Hello</li>');
element.appendTo('#panelSource');
element.draggable();
element.draggable("option", "connectToSortable", '#panelTarget');
at some point, I want to make it impossible for the user to drop items onto the sortable panel (panelTarget). I'm trying this:
$('#panelTarget').sortable( "disable" );
but I can still drop elements onto it, am I not interpreting the docs correctly?:
http://jqueryui.com/demos/sortable/#method-disable
how can I block the user from dropping stuff on the panel?
Thanks
This event/action comes from the .draggable() side, so you need to disable it there, like this:
element.draggable("option", "connectToSortable", false);
Related
How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
http://www.jobnisit.com/en
It look cleaner in terms of UI in my opinion.
Ps. sorry, I can't post the image now.
There is 2 ways to do this.
1) With css:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2) With js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
Tested with select2 4.0.0
The proper way of positioning the dropdown is using the core feature provided by select2 plugin.
It provides us with 'dropdownParent' property to place to dropdown inside the particular element
select field: #edit-field-job-skillsets-tid
parent item: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);
I have a kendo ui grid on my page.
And I have a button too. I want when I click button, sortable property on a specify column disable, and when click the button again, sortable property enable.
How to I do this?
Thanks.
Runtime enabling/disabling the sorting feature of the Grid is not supported.
But you can find some approaches to achieve it here: http://www.telerik.com/forums/disable-or-remove-sortable-capability-on-column-with-rebuilding-entire-grid
Hope this link will help you.
There is no method for this - this is option which is set only upon initialziation. So you will need to re-initialize the whole Grid. Covered here.
The column.sortable option should be set to true/false depending on the button that was clicked.
You need to write an click event for a table header on javascript.This event will prevent click on table header.
$(".k-grid-header .k-link").click(function (e) {
e.preventDefault();
if ($(this).text() === Header Name) {
e.stopPropagation();
}
});
e.PreventDefault helps to avoid window jump to top when clicking #-links.
Give your headername into the if condition to which you want to disable sorting
I'd like to move around a list item with the sortable jQuery UI helper. I want to use some sort of handle : being able to move the whole div but only when using that handle. I don't want the div to move when clicking elsewhere than the handle.
Any idea how to do that ? I searched the documentation and didn't find anything. My only current idea would be to set some sort of function that enables the sortable state when I press the handle and disable it when I release the mouse but it feels sloppy.
Use the handle option:
$(document).ready(
function()
{
$('#sortable_list').sortable({axis: 'y', handle: '.handle'});
}
);
I'm using JQuery UI Sortable to allow reordering elements within a list when dragging element. I would like to improve this processing by allowing reordering only when dragging from an icon present in each element (this icon is a span within the li) not for the whole element.
Is it possible to do this with Sortable?
Thanks very much for your help!
Thierry
Yes, jQuery-UI provides a "handle" option:
http://jqueryui.com/demos/sortable/#option-handle
Restricts sort start click to the specified element...
Initialize a sortable with the handle option specified.
$( ".selector" ).sortable({ handle: 'h2' });
I am working on drag and drop tool using jQuery UI's sortable widget.
I'd like to add a message into an empty div where something can be dragged into, like: "drag here". I'd like to remove this message as soon as something is in that div. There will be times when the page loads with something already in that div, so it can't be only on action, but onload needs to check it too.
How do I go about it?
Here's my code:
$("#divFrom, #divTo").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
You should be able to set up a draggable, and droppable and tap into droppable's drop event handler, which is fired when an item is dropped:
$("#target").droppable({
drop: function() {
// Empty the droppable div:
$(".message").remove();
}
});
Demo here: http://jsfiddle.net/andrewwhitaker/rUgJF/2/
As for doing something similar on load, if you provided your markup it would make providing a solution a little easier (is there a specific element inside the droppable div that you could check for?)
Hope that helps.