I try to drop dragged div into, for example, 3 div's.
I want to drop blue rectangle on 3 divs. When rectangle is dropped 3 div's have to change backgroud. I try to do this with draggable and droppable but it work only on to one element :(
$(function() {
$( ".event" ).draggable( {
grid: [ 5, 0 ],
containment: "parent"
}).resizable({
containment: "parent",
grid: [ 5, 0 ],
maxHeight: 40,
maxWidth: 1000,
minHeight: 40,
minWidth: 60,
handles: 'e, w',
resize: function( event, ui ) {
$( "#event" ).css("background-color", "blue");
}
});
$( ".eventPeriod" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" );
return false;
}
});
});
Any idea?
You change the tolerance of your droppable. Like this:
$( ".eventPeriod" ).droppable({
tolerance: 'touch',
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" );
return false;
}
});
Related
I am working with Select2 and jQuery UI Tooltip. I made a jsfiddle in this regard. I am describing issue below.
$( function() {
$(document).ready(function () {
$('.js-example-basic-single').select2();
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
});
If I click on dropdwon of Select2, the drop down opens with first value selected. I would like to remove this initial selection.
I'm trying to create a situation where it is possible to drag and clone a div inside another div multiple times, this div in the specific container has tot be sortable with the other ones.
$(function() {
$( ".drag" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".day " ).droppable({
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "" );
if($(ui.draggable).hasClass('draggable-source'))
$( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');
else
$( ui.draggable ).appendTo( this );
console.log(this.id)
}
}).sortable({
items: "div",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
This is working in this fiddle:
http://jsfiddle.net/mfUCe/
This is where i got stuck:
I want to be able to drag the 2 divs in to the divs that are already inside of the droppable containers.
it would be great if anybody could help me
I'm beginer to js and jquery and I need a little help if someone can help me...
What I want to do?
I want to drag div from sidebar to table. In sidebar div must be only draggable to table. When I drag div to table, there in table, div must be resizable and draggable again.
Photo:
I was try with this code but dont work well:
$(function() {
$( ".draggable" ).resizable();
$( ".draggable" ).draggable({revert: 'invalid', helper:'clone', snap: "#drop_here td", opacity: 0.7});
$( "#drop_here td" ).droppable({
accept: '.draggable',
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped!" );
}
});
});
DEMO and SOURCE code: http://jsbin.com/erofot/17/edit | http://jsbin.com/erofot/17
Here is how you could do it then: (replace what you have in jsbin with this code)
jsbin
$(function() {
//$( ".draggable" ).resizable();
$( ".draggable" ).draggable({
revert: 'invalid',
helper:"clone",
snap: "#drop_here td",
opacity: 0.7
});
$( "#drop_here td" ).droppable({
// accept only from left div,
// this is necessary to prevent clones duplicating inside droppable
accept: '#left .draggable',
drop: function( event, ui ) {
// 4 append clone to droppable
$( this ).append(
// 1 clone draggable helper
$(ui.helper).clone()
// 2 make the clone draggable
.draggable({containment:"parent"})
// 3 make the clone resizable
.resizable());
}
});
});
I have a ui slider element that I am using to let people rate a product, the purpose is to have this slider along with a button to insert the value into a MySQL table (sort of voting)
my slider looks like
$("#slider-range-max4").slider({
range: "max",
min: 1,
max: 10,
value: 0,
slide: function (event, ui) {
$("#slider-range-max-amount4").text(ui.value);
}
});
$("#slider-range-max-amount1").text($("#slider-range-max1").slider("value"));
How can I use a button to send the value selected by the user to mysql, do I have to embed the code into a form ?
Thanks
use ajax like bellow and send the value to php
$(function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
$.ajax({
type:"POST",
url:"your.php",
data:"vote="+$( "#slider-range-max" ).slider( "value" ),
success:function(response){
alert(voted);
}
})
});
In PHP
<?php
$vote="";
if(isset($_POST['vote'])){$vote=$_POST['vote']}
//now do your job with MySql here
?>
I've just started using jQuery UI to drag divs into a columns in a table. I have a couple different draggable divs with different background-colors and text inside them, and I need them to be able to dragged up to the drop area as a clone. This worked fine by using jQuery UI's example shopping cart code, but I've edited it so the whole object is dragged instead of just the text, but this then eliminates the clone functionality for some reason, even though I have helper:clone.
Here is my code:
<script>
$(function() {
$( "ul li" ).draggable({
appendTo: "body",
helper: "clone"});
$( ".day #drag" ).draggable({
appendTo: "body"});
$( ".day" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "ui-state-highlight" );
$( ui.draggable ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
Example column:
<td>
<div id="monday" class="day monday ui-widget-content"></div>
</td>
Draggable element:
<li><div style="background-color:#<?=$bgColor?>;color:<?=$textColor?>;" id="drag" class="<?=$subject?>"><?=$row['name']?></div></li>
It's essentially a timetable setup tool. Thank you for the help
Here is a jsFiddle for reference: http://jsfiddle.net/x5T4h/
Not sure that it is exactly what you want, but here is a good start for your : http://jsfiddle.net/x5T4h/2/
Basically, I removed the second draggable object declaration, and I added clone function to duplicate your element inside drop event $( ui.draggable ).clone().appendTo( this );
$(function() {
$( "ul li" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".day" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( ui.draggable ).clone().appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});