jQuery 드래그 앤 드롭에서 드롭 영역 필터링

debugcn 에 게시 Dev

조르지오

드래그 가능한 요소 ( .item) 및 드롭 영역 ( .droparea) 목록이 있습니다.

<div class="sortable">
    <div class="droparea" id="div0">Drop area 0</div>
    <div class="item" id="item1">Item 1</div>
    <div class="droparea" id="div1">Drop area 1</div>
    <div class="item" id="item2">Item 2</div>
    <div class="droparea" id="div2">Drop area 2</div>
    <div class="item" id="item3">Item 3</div>
    <div class="droparea" id="div3">Drop area 3</div>
</div>

내 목표는 요소 (예를 들어, 그 주변 지역을 제외하고, 드롭 지역에서 삭제 될 수 있도록하는 것입니다 #item1에서 삭제할 수 있습니다 #div2및 #div3있지만에서 #div0와 #div1).

드래그 가능한 되돌리기 옵션으로 방울을 거부하려고했습니다 . 드롭이 발생할 때마다 현재 드롭 영역을 드래그 한 요소를 둘러싼 드롭 영역 (드래그가 시작될 때 저장 됨)과 비교합니다. 일치가 발생하면 드롭이 거부되고 그렇지 않으면 수락됩니다.

revert: function(valid)
{
    if(valid) 
    {
        // compare dropping area with forbidden areas
        if(dropped==prevDrop || dropped==nextDrop)
        {
            console.log('invalid drop');
            return true;
        }
        else
        {
            console.log('valid drop ' + dropped.attr('id'));
            return false;
        }
    }
    else
    {
        return true;
    }
}

깡깡이

안타깝게도 작동하지 않습니다. 드롭은 항상 허용됩니다. 어떤 아이디어?

런콘

당신은 훌륭한 작업을했고 실제로이 코드를 작동시키기 위해서는 약간의 변경이 필요합니다.

에서 비교 방법 revert을,

if(dropped.prop("id")==prevDrop.prop("id") || dropped.prop("id")==nextDrop.prop("id"))

여기서 객체 비교를 사용 했지만 Item1 을 div0에 놓을 때 이러한 값의 결과 ,

console.log(dropped);
console.log(prevDrop);
console.log(nextDrop);

외모,

여기에 이미지 설명 입력

결과 dropped = $(this);에서 사용 하는 것과 다른 것을 droppable추가 context: div#div0.droparea.ui-droppable하는 것 같습니다 draggable. 따라서 비교에서 문제가 발생합니다.

여기에 작업 바이올린이 있습니다.

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

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

에서 수정2021-06-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사