With the help of the stackoverflow community, I've got the dragging to work perfectly using JQuery. Now, I've assigned a .drop class (and made it .droppable), but whenever I drop a .draggable onto the .droppable... nothing happens! Is there an error in javascript?
<script type="text/javascript">
$(document).ready(function() {
doReady();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function(s, e) {
doReady();
});
});
function doReady() {
$('.drag').draggable({ revert: true,helper: 'clone' });}
$('.drop').droppable({
tolerance: touch,
drop: function() { alert('dropped'); }
});
</script>
The top part of the script allows to the Drag & Drop goodness to continue working after a partial postback.
Here should be a string
tolerance: "touch",
I format your code
$(document).ready(function() {
doReady();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function(s, e) {
doReady();
});
}); // End of document ready
function doReady() {
$('.drag').draggable({ revert: true,helper: 'clone' });
} // End of do ready
$('.drop').droppable({
tolerance: "touch", // Here should be a string
drop: function() { alert('dropped'); }
});
Can you see $('.drop') is not in doReady function.
Fixed.
function doReady() {
$('.drag').draggable({ revert: true,helper: 'clone' });
$('.drop').droppable({
tolerance: "touch", // Here should be a string
drop: function() { alert('dropped'); }
});
} // End of do ready
Did you miss the } on the end of your doReady() function?
Related
$(function() {
$(".track").draggable({
containment:"document",
appendTo:document.body,
connectToSortable:"#playlist tbody",
revert: true,
revertDuration: 0,
cursor: "move",
helper: "clone",
cursorAt: { top: 17, left: 80 },
start: function(event, ui) {
},
drag: function(event, ui) {
}
});
$("#playlist tbody").droppable({
hoverClass: "ui-active",
accept:".track",
drop: function( event, ui ) {
if($("#playlist tbody .nothing")) $("#playlist tbody .nothing").remove();//.style.display="none";
}
}).sortable({
appendTo: document.body,
cursor: "move",
helper: "clone",
cursorAt: { top: 17, left: 80 },
});
$('.remove-td').click(function () {
$(this).parent().parent().remove();
});
});
How to delete data from which will present after onclick '✖' mark after drag and drop using jquery or javascript.
below is the link of working js fiddle
Js fiddle
just add new function in your javascript like
function removeRow(obj){
$(obj).parent().parent().remove();
//or
$(obj).closest(".track").remove();
}
remove below Code
$('.remove-td').click(function () {
$(this).parent().parent().remove();
});
Add removeRow function call to your all X
<tr class="track"><td>Track 1<button onclick="removeRow(this)" class="remove-td" style="float:right;">✖</button></td></tr>
You are using elements dynamically. Therefore the click function must be defined in a different way.
$(document).on('click', '.remove-td', function () {
$(this).parent().parent().remove();
});
You need to use event-delegation approach to attach an event handler to the element.
$('#wrapPls').on('click', '.remove-td', function () {
$(this).parent().remove();
});
Do not use $(this).parent().parent().remove() as it will remove the <tr> and you will NOT be able to drop anymore into Channel name column.
I have been trying to achive functionality as follows:
-you can drag and drop multiple 450x150 onto .drop_cont
-then you can drag and drop 300x150 onto 450x150
I tried adding and removing classes but it doesn't seem to work.
Is there any way to do that, probably there is some way that I didn't think of.
Demo:
jsFiddle
Sample Code:
$(document).ready(function () {
$( ".idg_row" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".idg_column" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".drop_cont" ).droppable({
accept: ".idg_row",
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
$( ".droppableC" ).droppable();
});
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
}
Once you add the class, you need to recall droppable to run on the new elements.
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
$('.droppableC:not(.ui-droppable)' ).droppable();
}
I have dragable element in my html. and jQuery is like this
$( ".block-33a" ).sortable({
revert: true
});
$( ".hidden_drag" ).draggable({
revert: true,
stop: function(event,ui){
//some code
}
});
by using this u can able to get my element back to the default place but it should be invincible while it is reverting. how do i do it?
UPDATE
this is my fiddle http://jsfiddle.net/Q2h2w/46/
and it will say my requirement too
I have updated the fiddle. Please have a look at it.
I have added the mouseup event to detect mouse release. Hope that will solve your purpose:
http://jsfiddle.net/Q2h2w/56/
var count=0;
$('.button_area').draggable({
revert: true,
drag: function(){
count++;
},
stop: function(event,ui){
$('.button_area').off("mouseup");
$(this).show();
},
start: function( event, ui ) {
$('.button_area').on("mouseup",function(){
$(this).hide();
});
}
});
I'm making a drag-and-drop matching game for a client.
Question 1: Once all images are matched to their words, how can I make a popup appear saying "Game Over" or something similar?
Question 2: Once an image has been matched to its word, is it possible to have both the image and the word fade out of view (so the page isn't cluttered by images that have already been matched)?
Here is my Javascript:
$("#bottle, #butterfly").draggable({ revert: "invalid", containment: "#wrapper"});
$("#bottleDrop").droppable({
accept: "#bottle",
drop: function(event, ui) {
if(ui.draggable.is("#bottle")){
$(this).addClass("correct").find("p").html("correct!");
}
}
});
$("#butterflyDrop").droppable({
accept: "#butterfly",
drop: function(event, ui) {
if(ui.draggable.is("#butterfly")){
$(this).addClass("correct").find("p").html("correct!");
}
}
});
JSFiddle
Here is one way it could be done:
var done = true;
$("#bottle, #butterfly").draggable({
revert: "invalid", containment: "#wrapper",
start: function(event, ui){
if(!done)
return false;
},
stop: function(event, ui){
if($(".correct").length == $(".drop").length){
setTimeout(function(){
alert('All items have been matched!');
},2000);
}
}
});
$("#bottleDrop").droppable({
accept: "#bottle",
drop: function(event, ui) {
if(ui.draggable.is("#bottle")){
$(this).addClass("correct").find("p").html("correct!");
ui.draggable.fadeOut(2000);
$(this).fadeOut(2000);
}
}
});
$("#butterflyDrop").droppable({
accept: "#butterfly",
drop: function(event, ui) {
if(ui.draggable.is("#butterfly")){
$(this).addClass("correct").find("p").html("correct!");
done = false;
ui.draggable.fadeOut(2000);
$(this).fadeOut(2000,function(){
done = true;
});
}
}
});
Example:
http://jsfiddle.net/trevordowdle/Uf8Tq/2/
I'm trying to use Jquery Draggable but I notice a flicker when the target item is lifted and then dropped, hovered over its old position, or brought out of its container. The image in the dragged div just disappears or appears in the wrong spot (it's supposed to always be displayed in the same position while dragging - as you'd expect).
Any idea how this can be corrected?
My code:
http://jsfiddle.net/PTSkR/28/
$(function () {
$('#container').isotope({
// options
itemSelector: '.study-box',
layoutMode: 'fitRows'
});
});
$(function () {
$(".study-box").draggable({
revert: "invalid",
helper: function () {
// We removeAttr('style') to get rid of the transform css that isotope added.
return $(this).clone().removeAttr('style').removeClass('isotope-item').addClass('drag-helper').appendTo('body');
},
start: function () {
$(this).hide();
},
stop: function () {
$(this).show();
},
zIndex: 100
});
});
$(function () {
$(".folder-box").draggable({ revert: "invalid" });
$(".folder-box").droppable({
// revert: "invalid",
accept: ".folder-box, .set-box",
drop: function (event, ui) {
var $this = $(this);
//ui.draggable.clone().removeAttr('style').removeClass('.folder-box').appendTo($this);
$('#container').isotope('remove', ui.draggable);
}
});
});
there is nothing wrong with the JavaScript, just remove all "position:fixed" from the CSS. It is messing the correct display off the background position.