Javascript 动态更改已删除元素的高度和宽度

Javascript 动态更改已删除元素的高度和宽度,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经创建了一个拖放文件,在这个文件中,当单击被拖放的元素时,用户将输入3*4这样的坐标,使用标量因子I获取元素的高度和宽度。我想更改已删除元素的高度和宽度。有人能帮忙吗 $(document).ready(function () { var x = null; // Make element draggable $(".drag").draggable({ helper: 'clone', cursor: 'move', tolerance: 'fit

我已经创建了一个拖放文件,在这个文件中,当单击被拖放的元素时,用户将输入3*4这样的坐标,使用标量因子I获取元素的高度和宽度。我想更改已删除元素的高度和宽度。有人能帮忙吗

 $(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++;
    }
  });
});

您的代码中缺少一些东西

  • 单击
    事件处理程序是一个
    闭包
    ,这意味着即使事件处理程序函数在其定义的范围外执行,它也可以访问
    ui.helper
    。但要更改宽度和高度,需要通过
    关键字引用当前事件绑定对象
  • 变量
    pf
    未定义,因此我定义了一个同名的局部变量
  • 根据您当前的逻辑,目标丢弃项看起来很奇怪,因此我在下面的JSFIDLE中将宽度和高度的静态值设置为300
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);

我不能创建它,因为整个代码都混在一起了。@VinitaVaswani:很难理解你的意思,所以你能在最少的代码内创建一个JSFIDLE吗。这是js fiddle,但是drag n drop在fiddle中也不能正常工作。我只想增加被删除元素的大小,如果它的高度为80,宽度为150,我希望用户输入大小,并更改被删除元素的大小。helper获取被删除的元素,我只想使用代码从元素中心的所有四个侧面更改大小@dreamweiver@madalinivascu我只想更改被删除元素的大小。