次のようにレンダリングする 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 値ではありません。
私が使用する jquery プラグインは jquery-ui-1.8.16.custom.js です。
前もってありがとう、シルヴィウ
LE : ご覧のとおり、必要な ID を取得するために複数の方法を試しましたが、それらはすべて最上位の '.cas' li 要素を指しています。
LLE: また、クラスは要素にスタイリングを追加しないことにも言及する必要があります。それらは、セレクターとして機能するために存在するだけです。