3

i would like to drag some images from divs to another div...i have a div container who has 5 more divs,in those 5 divs are some pngs. What i need is to drag 1 by one these pngs from 1st div to a div with id="dropspot" then clicking on "next button" to change to the second div which is in container and clear the dropspot div,and so on untill 5th div.

I have tryed something but aint what i need :( these function makes all images draggable and i need just the images inside of container to be draggable.

Heres a fiddle: http://jsfiddle.net/ygaw2/7/

and some code: 

$(function() {
    $( "#container img" ).draggable();
    ({
    containment: "#container",    
    revert: "invalid",
    helper: "clone"

    });
    $( "#dropspot" ).droppable({

      tolerance: 'fit',

      drop: function( event, ui ) {


      }
    });
  });
OzZie
  • 523
  • 9
  • 21

1 Answers1

2

Try this solution: http://jqueryui.com/droppable/#photo-manager It seems to me just like u wanna it to work.

In droppable callback u can clear droppable element content.

EDIT

Everything you need is in that example ive linked + one thing:

$( "#container img" ).draggable({
    containment: "#container",    
    revert: "invalid",
    helper: "clone"

    });

Delete (); after draggable

unbreak
  • 1,000
  • 1
  • 16
  • 32
  • You didnt understood what i wanna do. Lemme explain it again,i dont need to delete photos...i have 5 photos and 5 divs which change both in same time by clicking on a button but here we talk about drag and drop of images from divs...there are letters like a,b,c represented by pngs so i would like to drag these png onto another div id="dropspot" and fit inthere,clone these pngs and revert them if they arent dropped in the dropspot.I added these attributes on draggable but doesnt work...you can see it on the fiddle – OzZie Jan 15 '14 at 10:07
  • In this example is everything you need, and check out my edit. – unbreak Jan 15 '14 at 11:14
  • Main problem now @unbreak is that on dropspot,images arent visible :( and i added append or accept ("img") – OzZie Jan 15 '14 at 12:57
  • Can you @OzZie show how it works now? It will help in debuggin. – unbreak Jan 15 '14 at 13:17
  • sure,here's a fiddle with improvements : http://jsfiddle.net/ygaw2/8/ when you drag the png to the dropspot it just disappear...i tryed useing $("#dropspot").append(""); but doesnt help... – OzZie Jan 15 '14 at 13:21
  • 1
    Add ui.draggable.appendTo( this ); in drop callback: – unbreak Jan 15 '14 at 13:57
  • Sorry for bothering you @unbreak ...it works great : http://jsfiddle.net/ygaw2/18/ but now the problem is when i click on next button doesnt clear me the dropspot content :( – OzZie Jan 15 '14 at 14:06
  • 1
    I dont understand in 100% what you trying to reach, but try to this: `$("#dropspot").html('');` on the beginning of nextImage function. – unbreak Jan 15 '14 at 14:18
  • It works just fine! thank you @unbreak :x now i must do same thing for reset button...i need to reset dropspot containment if i wrong dragging letters and i need to restart the quiz...i have tryed $( "#reset" ).click(function() { $( "#dropspot" ).empty(); }); – OzZie Jan 15 '14 at 14:23
  • Use `$("#dropspot").html('');` again in function which reset quiz, but dragged letters disappear from `#container` when you drag them in to drogspot. Or maybe just refresh page? – unbreak Jan 15 '14 at 14:36
  • i tryed something like: function reset(){ $("#dropspot").empty(); } but it doesnt work :( what i need is to clear the droppable spot coz i add some clone of images taken with drag from container.My guess is that those clone doesnt affect dropspot,i mean dropspot with clone its like dropspot empty thats why doesnt clear anything :( but for next function it works great ...Sorry i dunno how to make code gray like yours – OzZie Jan 15 '14 at 14:40
  • 1
    Here is help about comments formating: http://stackoverflow.com/editing-help#comment-formatting now get do the case: `$("#dropspot").html('');` will empty `#dropspot` element. So: `function reset(){ $("#dropspot").html(''); }` should work – unbreak Jan 15 '14 at 15:10
  • Aaaw, ok, now im getting whats wrong, try this: `function reset(){ $("#dropspot").html(''); $("#container img").css({'position':'static'}) }` – unbreak Jan 15 '14 at 15:51
  • Again,nothing happens .. strange is that for next button,when i change div with png and image it works with same code – OzZie Jan 15 '14 at 15:58
  • Look, here: http://jsfiddle.net/ygaw2/26/ it works. I edited this setting top and left to auto, not position to static, for draggable it must be relative. – unbreak Jan 15 '14 at 16:04
  • 1
    i finally found this function working :X function reset(elementID) { document.getElementById(elementID).innerHTML = ""; } – OzZie Jan 16 '14 at 09:50