我通过读取查询字符串参数使用 jQuery 创建动态控件。这些控件可以拖动以整齐地放置它们,在拖放事件后,我将通过隐藏字段更新控件的位置和状态。只是我的实现现在在每次下降时更新数据,这并不好。我也通过活动做到了这一点,但效果不佳
当前实施
/*Create controls when only query string exists*/
if (config.params) {
//parse the query string json as a object
//ex:{type:"textbox",x:100,y:200,label:Name}
var params = $.parseJSON(config.params);
//for each control in json add it to document body
$(params).each(function (idx, obj) {
var id = new Date();//for generating dynamic id
id = id.getTime();
$("<span>").addClass(obj.css).load(function (ev) {
var a = this;
$(a).data("keys", {
key: $("label", a).text()**certainly label wont be found**,
value: $("input[name]:hidden", a)
});
}).
easydrag().ondrop(function (e, el) {
//easydrag drag drop plugin
var a = $(el),
b = a.data("keys"),
key = b.key,
value = b.value;
value.val(key + "$" + e.pageX + "$" + e.pageY);
}).
css({
position: "absolute",
top: obj.y,
left: obj.x
}).
append($("<label>", {
"for": id
}).
html(obj.label).
append(config.ELEMENTS(obj.type).attr("id", id))).
append($("<input>", {
"type": "hidden",
"name": "CONTROL$POSITION",
"id": "control_position_" + idx
})).
appendTo("form");
});
}
问题
- 如您所见,我在加载时将数据附加到 span 元素。但由于它是加载事件,我不会有内部
label
andhidden fields
。我只需要在元素上设置span
一次数据,因为在此期间drop event
我将访问标签和隐藏字段以更新控件的当前位置。我不想在query the dom
每一滴上都这样做label
,hidden field
这就是我的目的。 - 还给我关于在回发后如何重绘控件的想法?