$(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.
Related
I'm new to jquery, there is no question on this, I wanted my submit button able to get ids of multiple images in droppable, anyone can help? please help me or guide me along... I need to get the ids of the image that is only dragged inside the droppable and when submit button is pressed.. Display the image that is only inside droppable..
jsFiddle
https://jsfiddle.net/xInfinityMing/azvvhxvL/
JavaScript
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
cursor: "move",
cursorAt: {
top: 56,
left: 56
},
drag: function(event, ui) {
ui.helper.removeClass("end-draggable");
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.addClass("end-draggable");
ui.helper.removeClass("draggable");
}
});
$("#briefcase-full").droppable({
greedy: true,
tolerance: 'touch',
drop: function(event, ui) {
var id = ui.draggable.attr("id");
alert(id);
if ($("#briefcase").length == 0) {
$("#briefcase-droppable").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase-droppable").append(ui.draggable);
}
});
});
Basically, all the dragged element will go inside the droppable. so you can use children to check every elements.
$("#briefcase-droppable").children(".icons").each(function() {
var icon_id= $(this).attr("id");
});
JSFiddle : Link
I suggest you to use class instead of using img element to attach draggable event.
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 would like to be able to delete a cloned helper object by double-clicking on it.
I have the following javascript code:
$(document).ready(function(){
$(".draggable").draggable({
helper: 'clone',
start: function (event, ui) {
ui.helper.animate({
width: 200,
height: 200
});
},
cursorAt: {left:50, top:50}
})
.on('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable({cursor:'move'}).resizable());});
});
Here is a jsFiddle. Drag the red square to create a clone. I now wish to delete the clone via a double-click but all attempts have failed thus far.
Many thanks
To delete an element we just need to use $(this).remove(). try the following code to make it work:
.on('dragstop', function (event, ui) {
$(this).after($(ui.helper).clone().addClass('removable').draggable({
cursor: 'move'
}).resizable());
$('.removable').dblclick(function () {
$(this).remove();
});
});
jsFiddle: here
I am using custom helper method which is returning a <div>, on dropping that <div> its adding it more than one time. Please look at the code to understand it better
var dropHelp = true;
$(".product").draggable({
revert: 'invalid',
cursorAt: { top: -12, left: -20 },
connectToSortable: ".droppable",
helper: function(event) {
return $('<div class="helper">Helper</div>');
}
});
$(".droppable").sortable({
placeholder: "ui-state-highlight"
}).disableSelection();
$(".droppable").droppable({
drop: function(event, ui) {
if(dropHelp){
//clone and remove positioning from the helper element
var newDiv = $(ui.helper).clone(false)
.removeClass('ui-draggable-dragging')
.css({position:'relative', left:0, top:0});
$(this).append(newDiv);
//drop the draggable source element
} else {
$(this).append(ui.draggable);
}
}
});
$('#dropDrag').click(function(){
dropHelp = !dropHelp;
});
Here's the HTML
<button id="dropDrag">Toggle drop "Helper" or "Draggable"</button><br/><br/><br/>
<div class="product">Product 1</div>
<div class="product">Product 2</div>
<div class="product">Product 3</div>
<div class="droppable">Drop Target</div>
The full code can be find here.
I found out if we remove the connectToSortable property in draggable it will work fine. But i need that property and i am not getting the reason why it's behaving this way when connectToSortable is set.
Your drop() gets called twice because connectToSortable is also triggering a drop().
(Sortable is already a droppable)
I have edited your code to get the same result with receive function of sortable
DEMO
var dropHelp = true;
$(".product").draggable({
revert: 'invalid',
cursorAt: { top: -12, left: -20 },
connectToSortable: ".droppable",
helper: function(event) {
return $('<div class="helper">Helper</div>');
},
stop: function(){
$(this).css({opacity:1});
},
start: function(){
$(this).css({opacity:0});
},
});
$(".droppable").sortable({
placeholder: "ui-state-highlight",
receive: function(event, ui) {
if(dropHelp){
//clone and remove positioning from the helper element
var newDiv = $(ui.helper).clone(false)
.removeClass('ui-draggable-dragging')
.css({position:'relative', left:0, top:0});
$(this).append(newDiv);
//drop the draggable source element
} else {
$(this).append(ui.draggable);
}
}
}).disableSelection();
$('#dropDrag').click(function(){
dropHelp = !dropHelp;
});
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?