0

我已经构建了一个 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' 元素，例如对于数据 ID = 930 的 li 的子 ul 中的每个 li，我得到 930 作为data-id，不是当前节点的 data-id 值。

我使用的 jquery 插件是 jquery-ui-1.8.16.custom.js。

提前致谢， 西尔维乌

LE：正如你所看到的，我尝试了多种方法来获取所需的 id，但它们都指向顶级 '.cas' li 元素。

LLE：我还必须提到，这些课程不会为元素添加任何样式，它们只是为了作为选择器。

4

1 回答 1

0

嗯...磨难结束了，亲爱的人们！！！在构建树时，我更改了和HTML 属性的位置class，因此它们现在被放置在元素中，而不是其父元素中。data-iddata-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。

西尔维乌

于 2013-03-29T09:40:23.743 回答