0

さまざまなサイズの画像のコンテナーを作成したいと思います。サイズは数値の倍数になります (例: 25x25px 50x50px 75x50px など)。これらのドラッグ可能な画像用のドロップ可能なコンテナーを作成する方法についてのアイデアが必要です。画像を重ねてドロップしたり、コンテナーからロールアウトしたりしたくありません。(良い言葉を使ったかどうかはわかりません。理解できない場合は、http: //i.stack.imgur.com/dqcMW.pngを確認してください) . :)

ご協力いただきありがとうございます！

4

2 に答える 2

0

あなたの質問を完全には理解していませんでしたが、ユーザーに画像アップロード機能のコンテナに画像をドラッグアンドドロップしてもらいたい場合は、1つのサイズのコンテナを作成し、その画像のアップロードが完了した後、他の画像用の他のコンテナを作成できますサイズ

于 2013-02-10T12:35:58.260 に答える
0

興味深いタスクです。これは、ページ上の情報を保持する方法のインスピレーションにすぎません。これがこれを解決するのに適した方法であるかどうかを確認する必要があります。

画像を反復処理することで、画像に応じて非表示のHTML構造を動的に作成できます。画像ごとに、タスクに合わせるために必要な情報を含むdom要素を作成します。

たとえば、すべての画像はドラッグ可能でクラス.imagesがあり、一意のID#img1...と非表示の構造は<ul id="imgholder" style="display:none;>どこかにあります。

必要な情報を各画像に非表示の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 に答える