jQuery UI Draggable - show position on grid [duplicate] - javascript

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

Related

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 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 draggable and droppable clone events

I have elements where you can drag droppable (cloned) items. However when I drag parent items to left side, droppable/draggable is not working on clones. Is it possible to get event bindings copied to clones too? Or how can I bind events to these clones? See jsfiddle for example.
jQuery( document ).ready(function( $ ) {
$(".draggable").draggable({
helper: 'clone',
greedy: true
});
$(".droppable").droppable({
greedy: true,
hoverClass: "data-hover",
drop: function( event, ui ) {
$(this).append($(ui.draggable).clone());
$(".draggable").draggable({ helper: 'clone' });
}
});
});
http://jsfiddle.net/L9xYK/

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.

cloned "draggable" element's doesn't react to "droppable" areas

Hay I'm using this code to clone a draggable element
$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
$(".droppable").droppable({accept: ".draggable"});
Which works great. However, the "cloned" object no long reacts to "droppable" areas.
Is there any way around this? Can i make the draggable live? So any new .draggable elements react with the droppable one?
You have to declare an drop-event function to interact on droppable.
see Here
Every clone interacts with the droppable.
$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
$(".droppable").droppable({accept: ".draggable",
drop: function( event, ui ) {
$( this )
.addClass( "dropped" ).find( "> p" )
.html( document.lastModified );;
}
});
try like this
$('.draggable').draggable({helper: "clone"});
$('.draggable').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
//re-make objects draggable
$('.draggable').draggable({helper: "clone"});
});
...
Did this as an example for a different post.
http://jsfiddle.net/hHKh9/2/
I think you are missing helper:'clone' on the droppable

Categories

Resources