Question

我在项目中使用draggable，droppable和resizable。将元素拖动到特定位置后，会将其附加到div并使用data方法分配特定的$('.selector').data("index", {key: value})属性。

我正在尝试在调整元素大小后更新数据。我可以获取数据，但我似乎无法设置或更新现有数据。

工作示例：https://jsfiddle.net/Twisty/18erqbqv/23/

drop函数中添加的数据：

var pos = ui.position;
var $obj = ui.helper.clone();
var c = $(".dropped").length;

$obj.data("obj", {
  id: c,
  label: $obj.text(),
  top: pos.top,
  left: pos.left,
  width: $obj.width(),
  height: $obj.height(),
  layer: $obj.zIndex() - 1000
});

$obj.appendTo(".droppable");

尝试更新stop resizable：

var self = $(this);

self.resizable({
  handles: "ne, nw, se, sw",
  grid: $(".grid").data("size"),
  ghost: true,
  stop: function(e, ui) {
    console.log("Resize Stopped on ID: " + $(this).data("obj").id);
    $(this).data("obj").width = ui.size.width;
    $(this).data("obj").height = ui.size.height;
  }
});

console.log(self.data());

这个想法是用户将元素拖动到可放置区域。一旦删除，他们就可以单击它以选择元素，使其可拖动并可调整大小。停止调整大小后，我想更新数据。当用户下次单击该元素时，我应该在控制台中看到新数据。

看起来数据不会更新。

我尝试过的其他方法：

$(this).data("obj", {
  width: ui.size.width,
  height: ui.size.height
});

self.data("obj", {
  width: ui.size.width,
  height: ui.size.height
});

提前致谢！

在元素上设置新数据（'key'，object）

0 个答案: