1

こんにちは皆さん、私はjqueryが初めてです。特定の領域に画像をドロップできるドラッグ アンド ドロップを作成したいのですが、画像はその div のサイズにトリミングされます。別の画像を div にドロップすると、最初の画像を削除する必要があります。これを達成するのを手伝ってください。よくわからない場合は、http://www.shutterfly.com/photo-gifts/custom-iphone-casesをご覧になり、ケースを選択してパーソナライズに進んでください。

スタックオーバーフローは初めてです。よくわからない場合はお知らせください。

事前にサンクス。

4

1 に答える 1

0

jquery と jquery-ui を使用した簡単な例を次に示します。

$(document).ready(function(){
$(".image").draggable({
    drag:function(){
        $(this).css({opacity:0.5});
    }
});
$(".container").droppable({
  drop: function( event, ui ) {
    var img = ui.draggable[0];
      var chld = $(this).children().first();
      if(chld && $(chld).hasClass("image")){
          $(chld).css({width:null,height:null});
          $(".images").append(chld);
      }
      $(this).html("");
      $(img).css({opacity:1,width:"100px",height:"100px",top:"0px",left:"0px"});
      $(this).append(img);
   }
});

});

実際の例を参照してください: http://jsfiddle.net/Elak/pfe2p/5/

基本的に、「ドロップ可能な」要素に画像がドロップされたときに何が起こるかを制御する必要があります。

スタイルを適用してサイズ変更を行うことができます。css クラスを定義して $(..).addClass("yourclass") で画像に割り当て、画像をリセットする場合は .removeClass("..") でクラスを削除することもできます。私の例では、あまり「クリーン」ではない .css() を介して手動で行いました。

注: 最新の jquery では、画像のドラッグは現在 IE10 では機能しません。それが私がv1.7を使用した理由です

于 2013-09-21T17:27:07.907 に答える