jquery-ui - jquery DragAndDrop セットアップが正しく機能しない

Question

次のようにレンダリングする 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="{&quot;ID_CSM&quot;:20280,&quot;IDMAT_CSM&quot;:66,&quot;IDCAS_CSM&quot;:2563,&quot;CANTITEFIXE_CSM&quot;:1,&quot;REMARQUES_CSM&quot;:null,&quot;NOORDRE_CSM&quot;:1,&quot;materiel&quot;:{&quot;id_MAT&quot;:66,&quot;DEN_MAT&quot;:&quot;Carnet de km&quot;,&quot;DEN_UME&quot;:&quot;pces&quot;}}">
                </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="{&quot;ID_CSM&quot;:20281,&quot;IDMAT_CSM&quot;:694,&quot;IDCAS_CSM&quot;:2563,&quot;CANTITEFIXE_CSM&quot;:1,&quot;REMARQUES_CSM&quot;:null,&quot;NOORDRE_CSM&quot;:2,&quot;materiel&quot;:{&quot;id_MAT&quot;:694,&quot;DEN_MAT&quot;:&quot;Gilet sécurité&quot;,&quot;DEN_UME&quot;:&quot;pces&quot;}}">
                </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="{&quot;ID_CSM&quot;:20315,&quot;IDMAT_CSM&quot;:1620,&quot;IDCAS_CSM&quot;:2565,&quot;CANTITEFIXE_CSM&quot;:1,&quot;REMARQUES_CSM&quot;:null,&quot;NOORDRE_CSM&quot;:2,&quot;materiel&quot;:{&quot;id_MAT&quot;:1620,&quot;DEN_MAT&quot;:&quot;Télécomande porte&quot;,&quot;DEN_UME&quot;:&quot;pces&quot;}}">
                </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="{&quot;ID_CSM&quot;:20320,&quot;IDMAT_CSM&quot;:1329,&quot;IDCAS_CSM&quot;:2566,&quot;CANTITEFIXE_CSM&quot;:1,&quot;REMARQUES_CSM&quot;:null,&quot;NOORDRE_CSM&quot;:1,&quot;materiel&quot;:{&quot;id_MAT&quot;:1329,&quot;DEN_MAT&quot;:&quot;Trousseau divers clés boule &quot;,&quot;DEN_UME&quot;:&quot;pces&quot;}}">
                </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="{&quot;ID_CSM&quot;:20324,&quot;IDMAT_CSM&quot;:694,&quot;IDCAS_CSM&quot;:2567,&quot;CANTITEFIXE_CSM&quot;:2,&quot;REMARQUES_CSM&quot;:null,&quot;NOORDRE_CSM&quot;:1,&quot;materiel&quot;:{&quot;id_MAT&quot;:694,&quot;DEN_MAT&quot;:&quot;Gilet sécurité&quot;,&quot;DEN_UME&quot;:&quot;pces&quot;}}">
                </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="{&quot;ID_CSM&quot;:20314,&quot;IDMAT_CSM&quot;:1619,&quot;IDCAS_CSM&quot;:930,&quot;CANTITEFIXE_CSM&quot;:1,&quot;REMARQUES_CSM&quot;:null,&quot;NOORDRE_CSM&quot;:1,&quot;materiel&quot;:{&quot;id_MAT&quot;:1619,&quot;DEN_MAT&quot;:&quot;Carte essence&quot;,&quot;DEN_UME&quot;:&quot;pces&quot;}}">
        </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: また、クラスは要素にスタイリングを追加しないことにも言及する必要があります。それらは、セレクターとして機能するために存在するだけです。

Answer 1

親愛なる皆さん、試練は終わりました!!! ツリーを作成するときにclass、data-idとHTML 属性の位置を変更し、親である要素ではなくdata-typesuffix、要素に配置されるようにしました。<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。

シルヴィウ