0

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

谢谢你的帮助！

4

2 回答 2

0

didnt completely understand your question but.DO you want the user to drag and drop images to the containers for image upload facility then you can create a container of one size and after the upload of that image is complete you could some other container for other image size

于 2013-02-10T12:35:58.260 回答
0

有趣的任务，这只是你如何在页面上保存信息的一些灵感，你必须自己找出这是否是解决这个问题的合适方法。

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

例如，您所有的图像都是可拖动的并且具有 class .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 没有高度，直到开始可拖动事件并将它们添加到匹配的容器中，我想这看起来很酷，因为它向左浮动..

玩得开心

于 2013-02-10T12:36:06.573 回答