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

事实上，您正在使用draggable选择器初始化id，

    $( "#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初始化。

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

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

而且，

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

使用jquery在jsp中拖放功能

1 个答案: