Do you know if it is possbile drag a div that have 200px and a <audio></audio> element into a droppable area, and when the div is dropped the div changes the size, to have the size according to the sound duration (1px per second for example)?
https://jsfiddle.net/hfy3dwf5/4/
code without the div size part:
$(function() {
$(".drag").draggable({
revert: 'invalid'
});
$(".drop").droppable({
drop: function( event, ui ) {
}
});
});
So if i didn't get your problem statement wrong, you could try the following
$(".drop").droppable({
drop: function(event, ui){
var audlen = $('audio').duration;
$(ui.draggable).css({width:audlen + 'px'});
}
});
Related
I am new to Jquery and I am having some problem with my code. My program has a container and a small menu below. I have some img elements class piece that I can drag to my container and move around. I want to drop some other img element class cap inside my dragged piece items but when I drop the cap over the piece it didn't show up. When I see the console log I can see that the element has a child element but I cannot see it. What do you think is my problem?
var x = null;
$( function () {
$(".piece").draggable({
cancel: "a.ui-icon",
revert: "invalid",
helper: 'clone',
containment: '#container',
});
$(".piece").droppable({
accept: ".cap",
drop: function( event, ui ) {
x= ui.helper.clone();
x.appendTo(this);
}
});
$(".cap").draggable({
cancel: "a.ui-icon",
helper: 'clone',
containment: '#container',
});
$("#container").droppable(
{
accept : ".piece",
drop : function(event, ui)
{
x = ui.helper.clone();
x.css("width", 200);
x.css("height", 200);
x.draggable({
containment: '#container',
cursor: 'move',
});
x.appendTo(this);
x.droppable({
accept: ".cap",
drop: function( event, ui ) {
x= ui.helper.clone();
x.css("width", 200);
x.css("height", 200);
alert(' was dropped onto me!' );
x.appendTo(this);
console.log("this");
console.log(this);
}
});
ui.helper.remove();
}
});
});
I expect the output to be the cap over the piece but the cap didn't show over the piece. You can see the fiddle at: https://jsfiddle.net/littletrives/6ktub3a9/
Your code is placing the cap inside the piece correctly, as you have noticed.
The problem is that <img> elements can not contain elements (source: img specification, content model nothing specification). Because your cap <img> is inside of the piece <img>, it is not displayed.
A solution could be to add a <div> with the src of the piece as a background-image instead of adding it as an <img> tag. That way, you could add the cap <img> inside of it.
I made a fork of your jsfiddle with a small example: https://jsfiddle.net/tp7e2no1/1/
i have following fiddle
DEMO
Resizing of White divs
I have the draggable divs(red) and static divs (white & in the droppable fields )
My purpose is to make them both resize, but i can't
Can any one help
In the document ready function i comment the code that is responsble for re-sizing the
both red(draggable) and static(white) fields . the problem is they are not working at same time , any help regards this
Jquery Code
$(function () {
// responsible for resizing the draggable elements (red)
$('.resize_box').resizable({ handles: 'e' });
// responsible for resizing the static elements (white)
$('.resize_box').resizable({
handles: { 'e': '.ui-resizable-e' }
});
$(".selectorField").draggable({
helper: "clone",
stack: "div",
cursor: "pointer",
cancel: null
});
function makeDraggable($sel) {
$sel.find('.resize_box').resizable({
handles: { 'e': '.ui-resizable-e' }
});
}
$(".droppedFields").droppable({
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
var draggable = ui.draggable;
draggable = draggable.clone();
draggable.addClass('hers');
makeDraggable(draggable); //NEW
draggable.appendTo(this);
$(ui.draggable).hide();
alert("drop");
$(".droppedFields").sortable({
cancel: null,
connectWith: ".droppedFields"
}).disableSelection();
}
});
});
You need to make sure you have the proper selectors for the jQuery UI resizable functions. Based off your jsFiddle, you should make sure that the line of the javascript code is only selecting the RED divs and not both the RED divs and the WHITE divs.
Make the 4th line of code read:
$('.maine .resize_box').resizable({ handles: 'e' });
As an example, you can see the result here: http://jsfiddle.net/wnqj0uta/58/
I have been trying to clone and drop a draggable at the position in a droppable at the coordinates where the drop happens. I have found examples online that deal with appending draggables to droppables, but they all seem to move the draggable to a specific part of the droppable on the initial drop.
Here is an example that does just that: - http://jsfiddle.net/scaillerie/njYqA/
//JavaScript from the jsfiddle
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
});
Is there anyway I can make the draggable stay at the coordinates where the drop occured?
you must define the coordinates in the cloned element on the drop:
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
var clone=jQuery(ui.draggable).clone().addClass("dropped").draggable();
clone.css('left',ui.position.left);
clone.css('top',ui.position.top);
jQuery(this).append(clone);
}
});
and also set the position absolute by css on the cloned components
.ui-layout-center .component {
position:absolute !important;
}
Here is working: http://jsfiddle.net/o2epq7p2/
Edited you code and used appendTo() and set the offset
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
var _this = jQuery(this);
if (!ui.draggable.hasClass("dropped")) {
var cloned = jQuery(ui.draggable).clone().addClass("dropped").draggable();
jQuery(cloned).appendTo(this).offset({
top : ui.offset.top,
left: ui.offset.left
});
}
}
});
});
ui in the drop handler contains the dragged element's position absolute to the page. You need to transform those values to a position relative to the drop target and absolute position the cloned element inside the drop target using these values.
drop: function(e, ui) {
if (!ui.draggable.hasClass("dropped")) {
var parentOffset = jQuery('.ui-layout-center').offset();
var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable();
dropped.css('left', (ui.position.left - parentOffset.left) +'px');
dropped.css('top', (ui.position.top - parentOffset.top) +'px');
jQuery(this).append(dropped);
}
}
http://jsfiddle.net/3Lnqocf3/
I'm now developing a website that can drag elements and drop into a table cells (each cell has its "ID")
Now I can drag and drop the element to the cells but I want to know
How to get the ID of table cell where I dropped the element?
here's the picture's concept.
Suppose that cell's ID are the combination of row and column number.
At first you need to rename yours IDs because one ID can't start with a number. You neet at lest one letter, example "ID11" "ID12" ...
Than what are the Cells? div? Td? Input?
Can you a jsfiddle ?
-Edit.
you need something like thise:
jsfiddle
you must only change your skript to:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log("Dropped to" + $(".drop").attr("id"));
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
Here is the working fiddle.
Try something like this:
$(function() {
$("#draggable").draggable({ snap: ".drop"});
$(".drop").droppable({
drop: function(event, ui){
console.log($(this).attr('id'));
}
});
});
Check this fiddle.
First you need to enable the table cells to be dragged to by defining ondragover event callback. In the fiddle:
box.ondragover = function (evt) { evt.preventDefault(); };
preventDefault ensures that the browser does not set a dropdown lock on the element.
Then you simply play around with the event data, like this:
box.ondrop = function (evt) { droppedTo.innerHTML = evt.toElement.id; };
toElement holds reference to the element that you drop on, and you can get all the data you need from it, including id.
You need to change your script like this
$(function () {
$("#draggable").draggable({
snap: ".drop"
});
$(".drop").droppable({
drop: function (event, ui) {
alert($(this).attr("id"));
console.log("Dropped to " + $(this).attr("id"));
}
});
});
Change from $(".drop").attr("id") to $(this).attr("id") to get the id of the element that you are dropping into :)
Example http://jsfiddle.net/81ja79Ls/4/
I have a cloned element which I am able to drag however I wish to drop it in a specific div element and if valid not revert back to its original position, however it is always reverting back to its original position whether it is valid or not.
I am currently using the code below:
$("ul#objectsList li").draggable({
revert: 'invalid',
snap: "#objectsDropBox",
snapMode: "inner",
helper: function() { return $(this).clone().appendTo('body').show(); },
start: function(e, ui) { $(ui.helper).addClass("ui-draggable-helper");}
});
$("#objectsDropBox").droppable({
accept: "ul#objectsList li",
drop: function( event, ui ) {
alert('hi');
}
});
Why is it not staying in the div when a valid draggable is dropped?
Try this
$("#objectsDropBox").droppable({
accept: "ul#objectsList li",
drop: function (event, ui) {
$(this).append(ui.draggable);
//if you want to retain the element use ui.draggable.html() or clone it.
}
});
Fiddle - http://jsfiddle.net/dmNhZ/