ドロップされた要素の高さと幅を動的に変更します

Question

ドロップされた要素がクリックされたときにユーザーが3 * 4のような座標を入力するドラッグ・ドロップ・ファイルを作成しました。私はドロップされた要素の高さと幅を変更したい。誰も助けることができますか？

$(document).ready(function() { 

    var x = null; 

    // Make element draggable 
    $(".drag").draggable({ 
    helper: 'clone', 
    cursor: 'move', 
    tolerance: 'fit' 
    }); 

    var i = 1, j = 0; 
    var x1, x2, y1, y2, tmp, tmp2; 
    var sf = pf; 

    $("#droppable").droppable({ 

    drop: function(e, ui) { 

     var attr = ui.helper.attr('id'); 
     if (typeof attr == typeof undefined || attr == false) { 
     ui.helper.attr('id',"id"+i); 
     } 
     tmp = ui.helper.attr('id'); 
     x = ui.helper.clone().bind("click",'img',function(){ 

     alert("clicked"+ ui.helper.attr('id') + tmp); 
     leftpos = ui.offset.left-210; 
     toppos = ui.offset.top; 
     var cor = window.prompt("Enter coordinates x1,y1"); 
     var c = cor.split(','); 
     var w = c[0]*sf; 
     var h = c[1]*sf; 
     w = w/2; 
     h = h/2; 
     ui.helper.width(leftpos-w); 
     ui.helper.height(toppos-h); 
     }); 

     x.draggable({ 
     helper: 'original', 
     containment: '#droppable', 
     tolerance: 'fit', 
     }); 

     x.appendTo('#droppable'); 
     ui.helper.remove(); 
     i++; 
    } 
    }); 
}); 

Answer 1

あなたのコードに欠けているものがいくつかあります。

• clickイベントハンドラは、イベントハンドラ関数は、その定義された範囲外で実行されていてもui.helperへのアクセスを有するであろう意味し、closureあります。幅と高さを変更するには、現在のイベントに限定されたオブジェクトをthisというキーワードで参照する必要があります。
• 変数pfは定義されていないので、同じ名前のローカル変数を1つ定義しました。
• あなたの現在のロジックでは、ドロップされたアイテムが奇妙に見えるので、静的な値は300の幅と高さをjsfiddle以下に設定しました。

JSコード：

x= ui.helper.clone().bind("click", 'img', function() { 
    //leftpos = ui.helper.offset.left - 210; 
    //toppos = ui.helper.offset.top; 
    leftpos = ($(this).offset().left) - 210; 
    toppos = ($(this).offset().top); 
    ... 

    //ui.helper.width(leftpos-w); 
    //ui.helper.height(toppos-h); 
    $(this).width(300); 
    $(this).height(300); 

Live Demo @ JSFiddle