-1

I'm trying to create drag and drop activity where left side have some images and we have to drop that images into right inside the targeted div. can somebody help me or guide me on this i am new in html5 and jquery?

also if the draggable item is not match with that particular targeted div then it comes back to its original place

logic is like that img drag { if(img == targeted div){ img place inside div }

else{ it reverts to its original position }

and visa versaaa

Nikhil salwe
  • 355
  • 2
  • 13

1 Answers1

1

You need jquery UI draggable and droppable for this. You can refer them here: http://api.jqueryui.com/droppable & http://api.jqueryui.com/draggable .

I created a fiddle for it. So the images having class "yes" will only be dropped in the div, rest of them will not be dropped. Here is the sample code:

$('.drag img').draggable({
    revert: 'invalid',
});
$('.drop div').droppable({
    accept: '.yes'
});

Jsfiddle link: http://jsfiddle.net/p2taQ/

K K
  • 17,794
  • 4
  • 30
  • 39
  • Use this script to enable drag and drop on touch devices: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js – K K Apr 14 '14 at 07:52
  • Refer this solution:http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices – K K Apr 14 '14 at 08:04
  • thnks @kamlesh for your cooperation i just refer that link but as iam new to jquery ill get difficult to understand the code – Nikhil salwe Apr 14 '14 at 08:07