用于拖拽n拖放不同大小图像的容器

Question

我想为不同尺寸的图像制作一个容器，尺寸将是数字的倍数（例如：25x25px 50x50px 75x50px等）。我需要一些想法，如何为这些可拖动图像制作可放置式容器。 我不想让图像彼此重叠，或从容器中散出来。 （我不知道我是否用过好话，所以如果您不明白，请检查： http : //i.stack.imgur.com/dqcMW.png ）如果有人有任何想法或演示，那将是很好的。 :)

谢谢你的帮助！

Answer 1

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

Answer 2

有趣的任务，这只是启发您如何保存页面上的信息，您必须自己找出这是否是解决此问题的合适方法。

您可以通过迭代遍历图像来动态地创建隐藏的HTML结构，并为每个图像创建一个dom元素，其中包含适合您任务的信息。

例如，您所有的图像都是可拖动的，并且具有.images类，并且具有唯一的ID #img1...并且您的隐藏结构是<ul id="imgholder" style="display:none;>在您的dom中的某个位置。

为每张图片附加隐藏的li和所需的信息，我猜宽度，高度和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>');

之后，您可以使用信息来创建您的可放置元素

    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>";

现在，每个图像都有一个保管箱，这取决于您如何使它看起来优雅，因为您可以为每个图像找到匹配的容器#img1 -> #drop_img1 ，通过启动拖动事件，您可以向该保管箱添加一个类匹配图像，添加闪烁的边框或...，为使外观更好，您可以让div不带高度，直到开始可拖动事件并将其仅添加到匹配的容器中，我猜这在浮动时看起来很酷剩下..

玩得开心