在我的例子中,我有一些div和img标签。我只对div元素应用可拖动和可调整大小的操作。
在其中一个功能中,我们有“删除元素”功能,可以动态删除选定的元素。一切正常,在delete函数调用之后,我再次对事件绑定进行操作,以便resizable和draggable可以再次工作。可拖动的工作正常,但resizable不..
我尝试了许多组合,比如调用resizable(“destroy”).resizable(),但都不起作用。运行时从dom生成的html看起来有点奇怪。
当我删除图像时,问题出现了,页面上存在dragClass div。那么dragClass div就不能调整大小。请提出一些想法来解决这个问题。
这里是**jsFiddle Demo**链接。
下面是一个例子:
<div id="ParentDIV" style="margin-left:200px; width:800px; height:500px; background:lightgray;">
<div class="dragClass"><p>Drag me around!</p></div>
<br /><br />
<img class="dragImgClass" src="logo3.JPG" />
<br /><br />
<img class="dragImgClass" src="logo4.JPG" />
</div>
<br /><br />
<input id="Btn4" type="button" onclick="deleteObj();" value="Remove Element" />
js:-
$(function () {
BindEvtHandlers();
}); //End of DOM Ready
function BindEvtHandlers() {
$(".dragImgClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
.on("click", selectAction);
$(".dragClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
.resizable()
.on("dblclick", editAction)
.on("click", selectAction)
.on("blur", "textarea", blurAction);
}
function selectAction() {
var $this = $(this); //get current obj.
if ($this.get(0).tagName == "IMG")
$('body').data('CBO', $this.attr('src'));
else
$('body').data('CBO', $this.find('p').html());
$('body').data('selObj', $this);
$this.fadeTo('slow', 0.3);
}
function deleteObj() {
var $selObj = $('body').data('selObj');
alert($selObj.outerHtml());
var cont = $('#ParentDIV').html();
cont = cont.replace($selObj.outerHtml(), "");
$('#ParentDIV').html(cont);
$(".dragImgClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
.on("click", selectAction);
$(".dragClass").resizable('destroy');
$(".dragClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
.resizable()
.on("dblclick", editAction)
.on("click", selectAction)
.on("blur", "textarea", blurAction);
}
2条答案
按热度按时间kognpnkq1#
我找到了一个简单的解决办法。在deleteObj fn中,只需在第一行之后插入一行,并从fn中删除其余代码。
这将从DOM树中删除元素,而不是进行字符串操作。
w1jd8yoj2#
我很抱歉要回答一个超过10年的主题,但我遇到了类似的问题,并找到了解决方案,我在这里回答,希望能对其他人有所帮助。
当你创建一个父元素
resizable()
时,jQuery将根据你选择的句柄和方向的数量添加/追加一些<div>
元素作为父元素的子元素。如果在父元素上使用empty()
或remove()
方法,这些子<div>
元素也将被删除。这就是为什么父元素在使用empty()
或remove()
方法后不再可调整大小的原因。一个简单的解决方案是不要在父元素上使用一个总括的
empty()
或remove()
方法,而是明确地删除不再需要父元素的元素。