jquery DragAndDrop设置无法正常工作

时间:2013-01-30 13:11:33

标签: jquery-ui jquery-ui-draggable

我已经构建了一个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 = 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:我还要提到这些类没有为元素添加任何样式,它们只是用作选择器。

1 个答案:

答案 0 :(得分:0)

嗯......考验结束了,亲爱的伙计们!构建树时,我更改了classdata-iddata-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。

西尔维乌