Develop Reference

jquery resizeable pushes other divs

Dear Friends as you can see jquery resizeable plugin pushes my other div under other divs. how can i prevent this ?
jquery resizeable pushes other divs
this is my code. what should i do ?
$( "#satir21, #satir22, #satir1 , #satir3" ).sortable({
connectWith: ".connectedSortable",
change: function( event, ui ) {
$( "#"+ui.helper.attr("id") ).resizable({
containment: "#"+$(this).attr("id"),
handles : "s"
});
}
}).disableSelection();
$( ".kutular" ).resizable({
containment: "#satir21, #satir22"
});

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
});

Calling a jQuery function multiple times

So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!

Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.

Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});

How to add a class to a div when a certain image is dropped onto it?

So far I have it so if an image/section is dragged onto another div it will change the image of the div, but how can I have it so if a certain image/section with the class is dropped onto the div then it'll add a class to it and if another image/section is dropped onto it then another class is added?
So far I have this for the drag and drop:
$(function() {
$( "#draggable" ).draggable({
drag: function(event, ui) {
$( this )
.addClass( "choppedonion" )
.find( "section" )
.html( "" );
}
});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "fullbowl" )
.find( "div" )
.html( "" );
}
});
});

On the drop event you can reference the draggable element with ui.draggable. Then you can check if the element has the class you're looking for:
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "fullbowl" )
.find( "div" )
.html( "" );
var $draggable = $(ui.draggable);
if( $draggable.hasClass('oneClass')) {
$draggable.addClass('addedClass');
}
if( $draggable.hasClass('otherClass')) {
$draggable.addClass('otherAddedClass');
}
}
});
Here's a quick demo.

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.