我已经构建了一个TreeView，其呈现方式如下（此处仅显示第一个li，其余类似）：
<li class="t-item cas ui-droppable ui-draggable" data-id="930" data-typesuffix="CAS">
<div class="t-top"><span class="t-icon t-minus"></span><span class="t-in"><img alt="(C)" class="t-image" src="#">cabine</span>
<input
class="t-input" name="itemValue" type="hidden" value="930CAS">
</div>
<ul class="t-group" style="">
<li class="t-item cas ui-droppable ui-draggable" data-id="2563" data-typesuffix="CAS">
<div class="t-top"><span class="t-icon t-plus"></span><span class="t-in"><img alt="(C)" class="t-image" src="#">porte conducteur</span>
<input
class="t-input" name="itemValue" type="hidden" value="2563CAS">
</div>
<ul class="t-group" style="display:none">
<li class="t-item csm ui-draggable" data-id="20280" data-typesuffix="CSM">
<div class="t-top"><span class="t-in"><img alt="(M)" class="t-image" src="#">Carnet de km , 1 pces</span>
<input
class="t-input" name="itemValue" type="hidden" value="{"ID_CSM":20280,"IDMAT_CSM":66,"IDCAS_CSM":2563,"CANTITEFIXE_CSM":1,"REMARQUES_CSM":null,"NOORDRE_CSM":1,"materiel":{"id_MAT":66,"DEN_MAT":"Carnet de km","DEN_UME":"pces"}}">
</div>
</li>
<li class="t-item t-last csm ui-draggable" data-id="20281" data-typesuffix="CSM">
<div class="t-bot"><span class="t-in"><img alt="(M)" class="t-image" src="#">Gilet sécurité , 1 pces</span>
<input
class="t-input" name="itemValue" type="hidden" value="{"ID_CSM":20281,"IDMAT_CSM":694,"IDCAS_CSM":2563,"CANTITEFIXE_CSM":1,"REMARQUES_CSM":null,"NOORDRE_CSM":2,"materiel":{"id_MAT":694,"DEN_MAT":"Gilet sécurité","DEN_UME":"pces"}}">
</div>
</li>
</ul>
</li>
<li class="t-item cas ui-droppable ui-draggable" data-id="2565" data-typesuffix="CAS">
<div class="t-mid"><span class="t-icon t-minus"></span><span class="t-in"><img alt="(C)" class="t-image" src="#">console</span>
<input
class="t-input" name="itemValue" type="hidden" value="2565CAS">
</div>
<ul class="t-group" style="">
<li class="t-item t-last csm ui-draggable" data-id="20315" data-typesuffix="CSM">
<div class="t-top t-bot"><span class="t-in"><img alt="(M)" class="t-image" src="#">Télécomande porte , 1 pces</span>
<input
class="t-input" name="itemValue" type="hidden" value="{"ID_CSM":20315,"IDMAT_CSM":1620,"IDCAS_CSM":2565,"CANTITEFIXE_CSM":1,"REMARQUES_CSM":null,"NOORDRE_CSM":2,"materiel":{"id_MAT":1620,"DEN_MAT":"Télécomande porte","DEN_UME":"pces"}}">
</div>
</li>
</ul>
</li>
<li class="t-item cas ui-droppable ui-draggable" data-id="2566" data-typesuffix="CAS">
<div class="t-mid"><span class="t-icon t-plus"></span><span class="t-in"><img alt="(C)" class="t-image" src="#">boite à gants</span>
<input
class="t-input" name="itemValue" type="hidden" value="2566CAS">
</div>
<ul class="t-group" style="display:none">
<li class="t-item t-last csm ui-draggable" data-id="20320" data-typesuffix="CSM">
<div class="t-top t-bot"><span class="t-in"><img alt="(M)" class="t-image" src="#">Trousseau divers clés boule , 1 pces</span>
<input
class="t-input" name="itemValue" type="hidden" value="{"ID_CSM":20320,"IDMAT_CSM":1329,"IDCAS_CSM":2566,"CANTITEFIXE_CSM":1,"REMARQUES_CSM":null,"NOORDRE_CSM":1,"materiel":{"id_MAT":1329,"DEN_MAT":"Trousseau divers clés boule ","DEN_UME":"pces"}}">
</div>
</li>
</ul>
</li>
<li class="t-item cas ui-droppable ui-draggable" data-id="2567" data-typesuffix="CAS">
<div class="t-mid"><span class="t-icon t-plus"></span><span class="t-in"><img alt="(C)" class="t-image" src="#">porte passagers</span>
<input
class="t-input" name="itemValue" type="hidden" value="2567CAS">
</div>
<ul class="t-group" style="display:none">
<li class="t-item t-last csm ui-draggable" data-id="20324" data-typesuffix="CSM">
<div class="t-top t-bot"><span class="t-in"><img alt="(M)" class="t-image" src="#">Gilet sécurité , 2 pces</span>
<input
class="t-input" name="itemValue" type="hidden" value="{"ID_CSM":20324,"IDMAT_CSM":694,"IDCAS_CSM":2567,"CANTITEFIXE_CSM":2,"REMARQUES_CSM":null,"NOORDRE_CSM":1,"materiel":{"id_MAT":694,"DEN_MAT":"Gilet sécurité","DEN_UME":"pces"}}">
</div>
</li>
</ul>
</li>
<li class="t-item t-last csm ui-draggable" data-id="20314" data-typesuffix="CSM">
<div class="t-bot"><span class="t-in"><img alt="(M)" class="t-image" src="#">Carte essence , 1 pces</span>
<input
class="t-input" name="itemValue" type="hidden" value="{"ID_CSM":20314,"IDMAT_CSM":1619,"IDCAS_CSM":930,"CANTITEFIXE_CSM":1,"REMARQUES_CSM":null,"NOORDRE_CSM":1,"materiel":{"id_MAT":1619,"DEN_MAT":"Carte essence","DEN_UME":"pces"}}">
</div>
</li>
</ul>
在javascript中，我有以下拖放设置：
$('#stockTreeView').on('stockLoad', function () {
$('.cas').droppable(
{
accept: '.materiel',
drop: function (event, ui) {
var addRequest =
{
ID_MAT: $('#Materiel').data('tGrid').dataItem($(ui.draggable).closest('tr')).ID_MAT,
ID_CAS: $(this).closest("li").data('id')
};
console.log(addRequest);
addMaterielWindowManager.LoadWindowContent('Stock/AddMateriel', addRequest, 'Ajouter materiel');
}
}
).droppable(
{
accept: '.cas',
drop: function (event, ui) {
var changeParentRequest =
{
ID_CAS: $(ui.draggable).parent().data('id'),
IDCASPARENT_CAS: $(this).parent().data('id')
};
console.log(changeParentRequest);
$.post(
GetURL('Stock/UpdateCasierParent'),
changeParentRequest,
loadTreeView
);
}
}
).droppable(
{
accept: '.csm',
drop: function (event, ui) {
var changeParentRequest =
{
ID_CSM: $(ui.draggable).data('id'),
IDCAS_CSM: $(this).data('id')
};
console.log(changeParentRequest);
$.post(
GetURL('Stock/UpdateCasierMateriel'),
changeParentRequest,
loadTreeView
);
}
}
);
$('.cas, .csm').draggable(
{
helper: 'clone',
appendTo: 'body',
revert: 'invalid'
}
);
});
我需要帮助的问题是：如何使我的选择器更具体，以便我能够拖动到每个'.cas'节点。在我目前的情况下，每当我拖动任何东西时，它都被附加到列表中的顶级'.cas'元素，例如对于具有data-id = 930的li的子ul中的每个li，我得到930作为data-id，而不是当前节点的data-id值。
我使用的jquery插件是jquery-ui-1.8.16.custom.js。
提前致谢， 西尔维乌
L.E。 ：正如你所看到的，我已经尝试了多种方法来获取所需的id，但所有这些都指向了顶级的'.cas'li元素。
L.L.E：我还要提到这些类没有为元素添加任何样式，它们只是用作选择器。
答案 0 :(得分：0)
嗯......考验结束了，亲爱的伙计们！构建树时，我更改了class，data-id和data-typesuffix HTML属性的位置，以便它们现在放在<span class="t-in">元素中，而不是其父级<li>元素。
在js部分，我需要的是：
accept: '.cas',
drop: function (event, ui) {
var changeParentRequest =
{
ID_CAS: $(ui.draggable).data('id'),
IDCASPARENT_CAS: $(this).data('id')
};
$.postAntiForgery(
GetURL('Stock/UpdateCasierParent'),
changeParentRequest,
loadTreeView
);
}
.csm和.material类也是如此。对我有好处，我说：）
欢呼和快乐的编码，ppl。
西尔维乌