Geek Answers Handbook

JQuery drag and drop carousel

I want to create a web page with two image carousels, and I want to be able to drag and drop images from one carousel to another.

I have image carousels working with jCarouselLite: two UL elements are used to define images for carousels. It works great.

I can make two lists of UL images with both droppable and drag-and-drop lists. It works great.

But when I try to make these ito carousel lists, the images will not drag outside their carousel. This is because the carousel sets the CSS overflow style: hidden to pin images that are not currently visible in the carousel.

I turned this off while dragging so that images can be dragged outside the carousel, but then hidden images are also visible. I hid them using a DIV, absolutely located on top and left and right of the carousel.

When I drop the image on the carousel, it does not automatically display it, so I have a carousel that recreates itself when deleting the image.

here is the code i use to drag and drop

$( "img.deck_card_draggable").draggable({ revert: "invalid", helper: "clone", containment: 'window', cursor: "move", zIndex: 30, start: function(event, ui) { $("div#user_deck_carousel").css("overflow", "visible"); $("div#user_deck_carousel li").css("overflow", "visible"); }, stop: function(event, ui) { $("div#user_deck_carousel").css("overflow", "hidden"); $("div#user_deck_carouselli ").css("overflow", "hidden"); } }); $( "div#user_swaps_image_carousel ul" ).droppable({ accept: "img.deck_card_draggable", activeClass: "custom-state-active", drop: function( event, ui ) { // drop a copy of the image -- this is the required functionality var clone = ui.draggable.clone(); clone.draggable({ revert: "invalid", helper: "clone", cursor: "move" }); $( "div#user_swaps_image_carousel ul" ). append('<li style="overflow: hidden; float: left; width: 98px; height: 132px;">' +'<div><img width="74" height="122" src="'+clone.attr("src")+'" /></div></li>'); numSwaps++; $("div#user_swaps_image_carousel").jCarouselLite({ btnNext: "#swaps_next", btnPrev: "#swaps_prev", mouseWheel: true, circular: false, visible: numSwaps }); }, });

It all works, but it seems hacked together.

My question is this: is there a better way to do this?

With respect and gratitude

PBB

+4
source share
2 answers

I had the same problem and was solved using this code:

 $("li", value).draggable({ appendTo: "body", cancel: "a.ui-icon", revert: "invalid", helper: "clone", cursor: "move" });
+2
source

I ran into this problem. Found the code on this page to be quite useful. http://forum.jquery.com/topic/draggable-item-fixed-to-drag-outside-of-carousel-but-won-t-stick-when-dropped

It doesn't seem to be a css hack, maybe you just need to play with .draggable and .droppable

He fixed my problem and may possibly lend you a hand.

0
source

More articles:


All Articles