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

时间:2016-04-04 05:06:26

标签: javascript jquery html css

我创建了一个拖放文件,用户在点击掉落的元素时会输入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++;
    }
  });
});

1 个答案:

答案 0 :(得分:0)

您的代码中缺少一些内容。

  • array.indexOf()事件处理程序是click,这意味着即使事件处理函数在其定义的范围之外执行,它也可以访问closure。但是要更改宽度和高度,您需要通过ui.helper关键字引用当前事件有界对象。
  • 变量this未定义,因此我定义了一个具有相同名称的局部变量。
  • 使用您当前的逻辑,目标丢弃的项目看起来很奇怪,所以我在jsfiddle下面为宽度和高度设置了300的静态值。

JS CODE:

pf

Live Demo @ JSFiddle