jquery를 사용하여 jsp의 드래그 앤 드롭 기능

debugcn 에 게시 Dev

냉각기

여러분. 드래그 앤 드롭 기능이 첫 번째 요소에서만 작동하는 이유를 알 수 없습니다. 아마도 문제는 내가 사용하는 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" );
            }
        });
    });

런콘

selector 로 초기화 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여러 id개가 발생하여 문제 가 발생하는 for 루프 내부에 있습니다 .

id고유 id해야하며 페이지에의 가 여러 개있는 경우 우선 순위가 적용되고 드래그 가능한 요소에 대해 하나의 요소 만 초기화됩니다.

따라서 draggable초기화를 class선택기 로 바꾸면 제대로 작동합니다.

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

그리고,

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

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사