I have this system to create a list of chosen images by dragging and dropping the image items into a div id="trash".
This system is a copy from the photo manager in the jquery ui page:
Link
What I'm trying to implement is to have a arrow-up icon in each image sample to have it be inserted into the list without having to drag it.
I've managed to append the element but I'm having trouble to call the function deleteImage() so it animates like the animation after you drop the element inside the list.
Here is a JSFIDDLE of the project
This is what I have so far:
$('a.quick_insert').click( function(){
var sample = $("<li />").append($(this).closest($('li')).clone()).html();
$(this).closest($('li')).fadeOut(function(){
$('#trash').append(sample).fadeIn(function() {
var $list = $( "ul", $trash ).length ?
$( "ul", $trash ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
$sample.find( "a.ui-icon-trash" ).remove();
$sample.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$sample.animate({ width: "48px" }).find( "img" ).animate({ height: "36px" });
});
});
});
});
Thank you
Try change your code in:
// Quick Insertion
$('a.quick_insert').click( function(){
deleteImage( $(this).parent() );
});
so you will reuse the same function of the example by passing the current clicked container as element.
Demo: http://jsfiddle.net/gqSaq/5/
EDIT
To let the recycle work correctly you must delegate its click usin on, because the element is dynamically created.
Code:
// Quick Insertion
$('#gallery li').on('click', 'a.quick_insert', function () {
deleteImage($(this).parent());
});
Demo: http://jsfiddle.net/gqSaq/6/
Related
I am using following code to add line to my submenu :
$("li.mega-menu-megamenu a").hover(function(){
$( "<div class='remove'><hr /></div>" ).insertAfter("#mega-menu-primary-2 li:last-child" );
});
Its working perfectly fine.But the issue is that I want to remove that tag when there is no hover.
I have tried this : $("li.mega-menu-megamenu a").unbind('hover'); But by doing this, it will not add html tags at all.
How can I remove line when there is no hover on menu ?
You can use mouseout event for that
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").remove();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
});
Another possible solution is, instead of adding and removing the element you can just hide/show it.
$(document).ready(funnction() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
$(".remove").hide();
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").hide();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$(".remove").show();
});
});
I would opt for hide/show so you don't keep adding/removing from the DOM.
// Add the element to the DOM once and then hide it
var $removeElement = $( "<div class='remove'><hr /></div>" )
.insertAfter( "#mega-menu-primary-2 li:last-child" )
.hide();
// On mouseover we show the $removeElement and mouseout will hide it
$("li.mega-menu-megamenu a")
.hover(function(){ $removeElement.fadeIn(); },
function() { $removeElement.fadeOut(); }
);
I used fadeIn/fadeOut but you can use show/hide instead if prefered.
You can pass 2 functions to hover. Second will be called when mouse is exiting the element.
$("li.mega-menu-megamenu a").hover(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},
function() {
$(".remove").remove();
});
Another way:
$('li.mega-menu-megamenu a').on({
'mouseenter':function(){
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},'mouseleave':function(){
$(".remove").remove();
}
});
I am trying to implement a banner management system and was planning on using the jquery Photo Manager. The problem I am currently facing is that I cannot seem to get the parent image to clone on the primary container.
Here is the link to the fiddle for the codes (It is basically the same from the jQuery UI site)
What I am intending to create is to allow users to drag or add the image from the left to right and users can add the same image multiple times but as soon as the image is added to the right it disappears from the left.
I was looking at this piece of code for solution but do not see any removal of DOM elements specific to the item getting moved. only items removed from the DOM are the icons.
function deleteImage($item) {
$item.fadeOut(function () {
var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);
$item.find("a.ui-icon-trash").remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function () {
$item.animate({
width: "48px"
})
.find("img")
.animate({
height: "36px"
});
});
});
}
can someone help me out with an explanation.
Thanks in advance.
Actually using the jquery .clone() function did the trick. All I had to do was instead of passing the object of the element, I passed their clones with the events.
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
deleteImage(ui.draggable.clone(true));
}
});
setting the parameter to true for the clone, makes a deep copy of the element including all the events.
$("ul.gallery > li").click(function (event) {
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-trash")) {
deleteImage($item.clone(true));
} else if ($target.is("a.ui-icon-zoomin")) {
viewLargerImage($target);
} else if ($target.is("a.ui-icon-refresh")) {
$item.remove();
}
return false;
});
Here is the link to the working fiddle for reference. Link
Let's say I have two drop-zones one below the other and I have a draggable element whose height is equal to the sum of the heights of the drop-zones and the spacing between them. When I drag the element over both the zones and release the mouse, the element gets appended to the bottom drop-zone rather than the top drop zone. What I need to do is if I place the element over both the zones , I want the element to drop into the first zone and not the second zone.
This is what I have tried so far.
FIDDLE
and this is the script
<script type="text/javascript">
var display_under_drag = '';
$(document).ready(function(e) {
$( ".draggable_display" ).draggable({revert: "invalid"});
$( ".draggable_display" ).on( "dragstart", function( event, ui ) {
display_under_drag = $(this).attr('id');
$('.droppable_display').each(function(index, element) {
//$(this).css({'border-color':'#3CC','border-style':'solid','border-width':'3px'});
});
});
$( ".draggable_display" ).on( "drag", function( event, ui ) {
$(this).css('z-index','3001');
$('.droppable_display').each(function(index, element) {
if($("#"+display_under_drag).hitTestObject($(this)))
{
//console.log($('#'+display_under_drag).data().display_type);
//console.log($(this).data().dim);
console.log($(this).attr('id'));
$(this).css({'border-color':'#3CC','border-style':'solid','border-width':'3px'});
}
else
{
$(this).css({'border-width':'0px'});
}
});
});
$( ".droppable_display" ).droppable({greedy: true,tolerance: 'touch',accept: ".draggable_display"});
$( ".droppable_display" ).on( "drop", function( event, ui ) {
//alert(display_under_drag);
if($('#'+display_under_drag).data().display_type == '2x1')
{
$('#'+display_under_drag).appendTo($(this));
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px','z-index':'1000'});
});
$(this).css('z-index','3000');
//$('#'+display_under_drag).css({'position':'absolute','top':'0px','left':'0px'});
$('#'+display_under_drag).appendTo($(this));
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px','z-index':'1000'});
});
$(this).css('z-index','3000');
$('#'+display_under_drag).css({'position':'absolute','top':'0px','left':'0px'});
}
});
$( '.draggable_display' ).on('mouseup',function(e){
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px'});
});
});
});
</script>
Can someone help me out.
EDIT: There might multiple dropzones like this stacked next to each other. Like a 3x3 grid. In each case , the top dropzone should be the one which should accept the drop and not the bottom one. For instance , if I hover over column 1 => row 1 and row 2 , col1 row1 should be the dropzone. If I hover over column 1 => row 2 and row 3 , col1 row2 should be the dropzone.
It's for a game we are trying to develop.The drag and drop should work the way I have posted in the question.
In this fiddle - http://jsfiddle.net/adrianjsfiddlenetuser/zyUkd/35/ I'm attempting to remove the draggable functionality of all divs that are styled with .myDivs when the button 'Remove Draggable' is clicked.
The function call $('.myDivs').draggable('disable'); does not seem to achieve this ?
First of all, your click handler is made out of a $(document).ready() function, which means that it can be attached even if the DOM isn't totally loaded. Then, you didn't make the elements draggable with draggable but with sortable, so you should use $(elements).sortable('disable'):
$(document).ready(function() {
var els = $('.connected');
els.sortable({
connectWith : ".connected",
items : ".myDivs:not(.excludeThisCss)"
}).disableSelection();
$("#button").click(get);
function get() {
els.sortable('disable');
}
});
Your updated JSFiddle here: http://jsfiddle.net/zyUkd/38/
Problem is that
$("#button").click(get);
is not in right place it must be inside onload event handler. So your code must look like this:
$(function() {
$( ".connected" ).sortable({
connectWith : ".connected",
items : ".myDivs:not(.excludeThisCss)"
}).disableSelection();
$("#button").click(get);
});
function get() {
$('.myDivs').draggable('disable');
}
$(function() {
$( ".connected" ).sortable({
connectWith : ".connected",
items : ".myDivs:not(.excludeThisCss)"
}).disableSelection();
$("#button").click(function(){
$( ".connected" ).sortable( "option", "disabled", true );
});
});
I have a draggable element , that when its dropped onto the target, it adds a delete button:
$( "#committed" ).droppable({
hoverClass: 'drophover',
drop: function( event, ui )
{
$(function()
{
var done;
if( done ) return;
done = true;
$(ui.draggable).append('<button class="delBtn" type="reset">X</button>');
$(ui.draggable).draggable( "option", "disabled", true );
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
}
Once its been dropped, it then becomes sortable. The issue is , everytime the element is sorted, the Delete button gets added again. As there are multiple elements being dragged and dropped and then sorted, so .length>? doesn't work.
I essentially need
If (this.delBtn exists)
I updated another jsfiddle project, there the button is added only if the button does not exist on the draggable object yet: jsfiddle example
The trick here is this:
if ($(ui.draggable).find('button.delBtn').length == 0) {
$(ui.draggable).append('<button class="delBtn" type="reset">X</button>');
}
It checks if the dragged item contains a button with class delBtn. If not then it adds the button.
Wouldn't something like this sort you out?
if($('button.delBtn').length > 0)
{
// The delete button exists...
}