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
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'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 two block one is "draggable" and the other is "sortable".
When I start dragging an item from "sortable" I want to add a background color to a div and if I stop dragging it I want to remove the background color.
Here's my JS:
$(".sortableList").sortable({
start: function(event, ui) {
if (event.handleObj.namespace=="sortable")
$('.background').show();
},
update: function(event, ui) {
if (event.handleObj.namespace=="sortable")
$('.background').hide();
}
});
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).addClass('testing');
}
});
Here's a jsbin containing a live example of what I'm trying to do.
The problem is that when I start dragging an item from "sortable" and drop it in the same place it was the background color remains the same and I'm not expecting this.
How can I do this?
Use the stop event instead of the update event:
$(".sortableList").sortable({
start: function(event, ui) {
if (event.handleObj.namespace=="sortable")
$('.background').show();
},
stop: function(event, ui) {
if (event.handleObj.namespace=="sortable")
$('.background').hide();
}
});
I got some div's which are sortable etc.. But they got all the same classes, so if I drag one, all the contents of the div's are hiding. I want to get 'id' of the div i'm dragging, and put it into hide and show function.
It should be like this..
jQuery code:
$("#column-right").sortable({
connectWith: ".sort",
handle: ".title",
placeholder: "salih",
cursor: 'move',
revert: 'invalid',
start: function() {
.click(function() { // I know it is wrong but it should be like this
var id = $(this).attr('id')
}
$('id').hide();
},
stop: function() {
.click(function() { // same
var id = $(this).attr('id')
}
$('id').show();
}
});
EDIT: Example my problem: fiddle
Please let me know if this is something you were looking for:
JavaScript Code
$("#column-left, #column-middle, #column-right").sortable({
connectWith: ".sort",
handle: ".title",
placeholder: "salih",
cursor: 'move',
revert: 'invalid',
start: function() {
$(this).find('.contents').hide();
},
stop: function() {
$(this).find('.contents').show();
}
});
$(".sort").disableSelection();
In general, $(this).find('.contents') will be exactly the child element (content) which you are dragging.
Also, I have merged your 3 identical methods into 1 avoiding duplicates and any mess in the code.
The draggables in my drag and drop game should only be able to be dropped in the designated area highlighted by the css.
$('.drag').draggable({
helper: 'clone',
snap: '.drop',
grid: [60, 60],
revert: 'invalid'
});
$('.drop').droppable ({
drop: function(event, ui) {
word = $(this).data('word');
}
});
The CSS style is called .showword, and the click event that triggers it is called "#picknext".
Any ideas how I would get the draggable to revert if it wasn't dropped in the styled area?
Something like this...
$('#picknext').click({
drop: function(event, ui) {
word = $(this).data('word');
}
});
Here is something that should get you started.
http://jqueryui.com/demos/droppable/#revert
Rather than having a function for your revert property you want to set it to invalid as discussed in that options help: http://docs.jquery.com/UI/Draggable#option-revert