Develop Reference

How to reset draggable and droppable function on click jQuery UI

I want to reset draggable function by on click using the code below.
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function() {
alert( "dropped" );
}
});
https://codepen.io/Shahadat321/pen/PVjJOW

jQuery UI Draggable - show position on grid [duplicate]

I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it so when you are dragging an element and it is hovered over a droppable area that area either highlights or has a border so they know they can drop it there.
As secondary question, all my draggable elements have a display:block, a width and a float on them, so they look nice and neat in my droppable areas. When items are dropped they seem to get a position set to them as they no longer float nice and neat like the rest of my items. For reference, here is my javascript.
$('.drag_span').draggable({
revert: true
});
$('.drop_div').droppable({
drop: handle_drop_patient
});
function handle_drop_patient(event, ui) {
$(this).append($(ui.draggable).clone());
$(ui.draggable).remove();
}

Check out http://jqueryui.com/demos/droppable/#visual-feedback.
Ex:
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#draggable2" ).draggable();
$( "#droppable2" ).droppable({
accept: "#draggable2",
activeClass: "ui-state-hover",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});

This should work for adding a highlight on hover.
$('.drop_div').droppable({
hoverClass: "highlight",
drop: handle_drop_patient,
});
Then create a css class for highlight that sets the border or changes the background color or whatever you'd like.
.highlight {
border: 1px solid yellow;
background-color:yellow;
}
As far as the position is concerned you can reapply css once the drop is complete.
function handle_drop_patient(event, ui) {
$(this).append( $(ui.draggable).clone().css({'float':'left','display':'block'}) );
$(ui.draggable).remove();
}

FYI: hoverClass has been deprecated in favour of classes option. It should now be:
$('.drop_div').droppable({
classes: {
'ui-droppable-hover': 'highlight'
},
drop: handle_drop_patient
});

How to select the multiple rows in jQuery datatable using the mouse drag option

I am using the jQuery DataTables plug-in in my application. I need to select the multiple rows in a jQuery datatable using the mouse drag option. How is it possible?

Use jQuery-UI selectable and code similar to the following:
$( "#yourTable" ).selectable(
{
distance: 10,
stop: function()
{
$( this ).find( "tr" ).each(
function () {
if ( $( this ).hasClass( 'ui-selected' ) )
$( this ).addClass( 'row-selected' );
else
$( this ).removeClass( 'row-selected' );
});
}
});
I use 'distance: 10' because I found that otherwise my mousedown handler for the table wouldn't get events - this may not be important for you.

Change CSS with jQuery Sortable

How can I change CSS property once sorted. Something likes this:
$( "#sort" ).sortable({
$(#div1).css("background-color","yellow");
});
Thanks alot

When you call initiate the plugin, make sure you pass a handler for the stop event:
$('#sort').sortable({
stop: function(){
$('#div1').css('background-color','yellow');
}
});

http://docs.jquery.com/UI/Sortable#events
$( ".selector" ).sortable({
update: function(event, ui) { ... }
});

Look at the events for sortable on the jQuery UI website: http://jqueryui.com/demos/sortable/#events
Depending on the event you want, you can use:
$( "#sort" ).sortable({
change: function(){
$("#div1").css("background-color","yellow");
}
});

Help with Jquery ui.slider

I am using this implementation of the ui.slider which controls the ui.tabs as found on the Jquery website:
http://jqueryui.com/demos/slider/#tabs
Everything is working fine however when I directly link to a tab, the slider always stays in its initial position (or whatever you stated as the initial value).
Demo can be found here: http://jqueryui.com/demos/slider/tabs.html#tabs-2
Is there any way of setting the slider to the same position as the tab when it is directly linked to?
Thanks very much.

Something like this should do it:
$(function() {
$( "#tabs" ).tabs({
select: function( event, ui ) {
$( "#slider" ).slider( "value", ui.index );
}
});
$( "#slider" ).slider({
min: 0,
max: $( "#tabs" ).tabs( "length" ) - 1,
slide: function( event, ui ) {
$( "#tabs" ).tabs( "select", ui.value );
},
value: $( "#tabs" ).tabs( "option", "selected" )
});
});