使用 jquery 在 jsp 中拖放功能

Question

伙计们。无法弄清楚为什么拖放功能仅适用于第一个元素。也许问题是我使用的 jstl。所以，伙计们，你能给我一个如何修复它的建议吗？！

Jsp 页数：

<td>
                    <section id="widgets">
                        <h2>Widgets</h2>

                        <c:if test="${empty allBaseWidgets}">
                                <h1>There are no widgets.</h1>
                        </c:if>

                        <c:if test="${!empty allBaseWidgets}">
                            <c:forEach var="widget" items="${allBaseWidgets}">
                                <div id="widgetJS" title="${widget.name}" class="ui-draggable ui-draggable-handle">
                                    <img src="${widget.imageUrl}" width="20" height="20" alt="${widget.name}"/>

                                    <div class="widget-info">
                                        <h2 class="widget-title">${widget.name}</h2>
                                        <p class="id">${widget.id}</p>
                                    </div>
                                </div>
                                <br/>
                            </c:forEach>
                        </c:if>
                    </section>
                </td>
                <br />
                <br />
                <td>
                    <section>
                        <div id="platform">
                            <h2>Platform</h2>
                            <div class="cart-content">
                                <ol>
                                    <li class="placeholder">You have no items in platform.</li>
                                </ol>
                            </div>
                            <div class="empty">Remove all items from cart.</div>
                        </div>
                    </section>
                </td>

这是我的 js 文件：

 $(function() {
        $( "#widgetJS" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
        $( "#platform ol" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function( event, ui ) {
                $( this ).find( ".placeholder" ).remove();
                $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
                $( this ).removeClass( "ui-state-default" );
            }
        });
    });

Answer 1

这是因为您正在使用 id 选择器初始化 draggable，

    $( "#widgetJS" ).draggable({

但是，在您的 JSP 代码中，

<c:forEach var="widget" items="${allBaseWidgets}">
    <div id="widgetJS" title="${widget.name}" class="ui-draggable ui-draggable-handle">
        <img src="${widget.imageUrl}" width="20" height="20" alt="${widget.name}" />
        <div class="widget-info">
             <h2 class="widget-title">${widget.name}</h2>

            <p class="id">${widget.id}</p>
        </div>
    </div>
    <br/>
</c:forEach>

您正在使用的id； widgetJS 位于 for 循环内，这将导致您的页面出现多个 id，从而导致问题。

id 是唯一的，如果您的页面中有多个 id，则优先发生并且只有一个元素被初始化为可拖动。

因此，将 draggable 初始化替换为 class 选择器，它将正常工作。

<div id="widgetJS" title="${widget.name}" class="widget-class ui-draggable ui-draggable-handle">

并且，

 $( ".widget-class" ).draggable({

使用 jquery 在 jsp 中拖放功能

Drag and drop feature in jsp using jquery

jquery

jstl