[英]How do you target a cloned draggable element during the 'stop' event?
我有一個可拖動的列表元素,該元素在拖動時克隆並填充另一個列表。 當我刪除該項目時,我想更改新刪除的li元素的內容。 我的問題是jQuery的這仍然是原始拖動項,而不是克隆項。
如何專門針對新克隆的項目,以便可以更改其內容而不影響列表中的其他項目?
代碼如下。 感謝您的智慧!
CSS:
<style>
#intro-clone, #assessment-clone {
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
display: inline-block;
}
#intro-statements, #assessment-statements {
list-style-type: none;
margin: 0;
padding: 0;
width: 365px;
}
#intro-clone li, #assessment-clone li, #intro-statements li, #assessment-statements li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
min-height: 25px;
}
#intro-clone li, #assessment-clone li, #intro-statements li, #assessment-statements li {
min-height: 25px;
line-height: 1.2em;
}
.ui-state-highlight {
min-height: 25px;
line-height: 1.2em;
}
ul {
padding: 6px 1px 1px 0 !important;
min-height: 42px;
background: silver;
border-radius: 3px;
}
</style>
JS:
<script>
$(function() {
$("#intro-statements, #assessment-statements").sortable({
placeholder: "ui-state-highlight",
revert: true
});
$( "#intro-clone li" ).draggable({
drag: function() { $("#intro-clone li").css("width","158px"); },
stop: function() {
$("#intro-statements li").css({"width":"343px","height":"25px"}); // this is applied to ALL the li elements, including the cloned one
console.log(this); // reference's the original drag element, not the clone
window.setTimeout(function() { $(this).html("new content") }, 1000); // doesn't work!
},
connectToSortable: "#intro-statements",
helper: "clone",
revert: "invalid"
});
$( "#assessment-clone li" ).draggable({
drag: function() { $("#assessment-clone li").css("width","158px"); },
stop: function() {
$("#assessment-statements li").css({"width":"343px","height":"50px"}).html("new content<br>new line"); // this is applied to ALL the li elements, including the cloned one
},
connectToSortable: "#assessment-statements",
helper: "clone",
revert: "invalid",
});
$("#intro-statements, #assessment-statements").disableSelection();
$("#show").click(function() {
var intros = {};
$('li', 'ul.sort').each(function(i) {
var $li = $(this);
var $text = $li.text();
var name = $li[0].tagName.toLowerCase();
//intros[name + '-' + i] = $text;
intros[i] = $text;
});
console.log(intros);
$("#show").html(JSON.stringify(intros));
});
});
</script>
HTML:
<ul id="intro-clone">
<li class="ui-state-default">Intro item</li>
</ul>
<ul id="assessment-clone">
<li class="ui-state-default">Assessment item</li>
</ul>
<br>
<br>
<ul id="intro-statements" class="sort">
</ul>
<br>
<ul id="assessment-statements" class="sort">
</ul>
<div id="show">SHOW</div>
瘋狂地花了很多時間試圖找到解決方案,然后當您尋求幫助時,它就來了!
因此,這為我帶來了竅門:我將一個類附加到drag事件上的元素上。 刪除新元素后,我從源元素中刪除該類,並將該類定位到新克隆的元素上,然后對其進行更改。 最后,我然后從克隆的元素中刪除該類,以使其保持唯一。
這是更新的js:
$( "#intro-clone li" ).draggable({
drag: function() {
$("#intro-clone li").css("width","158px").addClass("new"); // add the new class
},
stop: function() {
$("#intro-clone li").removeClass("new"); // remove it again
$("#intro-statements li.new").css({"width":"343px","height":"25px"});
window.setTimeout(function() { $("#intro-statements li.new").html("new content") }, 1000); // make my changes to the cloned element
window.setTimeout(function() { $("#intro-statements li").removeClass("new") }, 1500); // remove class so it is unique for the next clone
},
connectToSortable: "#intro-statements",
helper: "clone",
revert: "invalid"
});
這可能是好的代碼,可能不是,但是它解決了我的問題,所以我很高興:)
您需要將stop
添加到以下sortable
方法中,因為sortable
使得draggable
和droppable
draggable
在一起。 我認為這對您來說更好。
$("#intro-statements, #assessment-statements").sortable({
placeholder: "ui-state-highlight",
revert: true,
stop: function(event, ui) {
console.log(event.target);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.