Container for drag n drop different size of images

Question

I would like to make a container for images with different sizes the sizes will be a multiple of a number (example.: 25x25px 50x50px 75x50px etc.) I need ideas how can i make a droppable container for these draggable images. I don't want to allow to drop images on top of each other, or to loll out from the container. (I don't know if i used the good words so if you don't understand check this: http://i.stack.imgur.com/dqcMW.png ) If somebody has any ideas or demos, it would be nice. :)

Thanks for your help!

Answer 1

并没有完全理解您的问题，但是。您是否希望用户将图像拖放到用于图像上传工具的容器中，然后可以创建一个大小的容器，完成该图像的上传后，您可以将另一个容器用于其他图像尺寸

Answer 2

interesting task, this is just some inspiration how you could hold the information on the page, you'll have to find out yourself if this is a suitable way to solve this .

You could create a hidden HTML-structure dynamicly depending on your images by iterating over them and for each one you create a dom-element containing the information you need to fit you task.

for example all you images are draggable and have the class .images , and an unique id #img1... and your hidden-structure is an <ul id="imgholder" style="display:none;> somewhere in your dom.

append hidden li for each image with the info you need, i guess width, height and an id

$('.images').each(function() {
var width = $('this').attr('width');
var height = $('this').attr('height')
var id = $('this').attr('id');
$('#imgholder').append('<li class="imgdata" id="'+id+'" data-id="'+width+'" >'+height+'</li>');

after this you can use the info to create your droppable elements

    var $item = $(this);
    var id = $item.attr('id');
    var width = $item.data('id'); 
    var height = $item.text();
   /*  append some div's to your desired container e.G .dropcontainer*/
    $('.dropcontainer').append('<div class="droppable" style="position:relative;foat:left;width:'+width+'px;height'+height+'px;" id="drop_'+id+'"></div>";

Now you have a dropbox for every image, it's up to you how to let this look elegant, as you can find for each image the matching container #img1 -> #drop_img1 , by starting the drag event you could add a class to the dropbox matching to the image, adding a blinking border or ... , for make this look better you could let the div's without height and with until starting draggable event and add them only to the matching container, i guess this would look cool as it floats left..

have fun