개요

드래그를 통해'재배열'과'끼워넣기 관계 변경'을 동시에 할 수 있는 메뉴 화면을 만들고 싶습니다. jQuery UI의sortable과droppable을 조합해 보았습니다.하지만 이 두 그룹은 순조롭지 못해droppable 부분만 직접 만들었다.이미지 완성은 다음과 같은 작업의 UI입니다.

실패 방법

간단하게 jQuery UI의sortable과droppable을 조합하면 순조로울 줄 알았는데sortable에서 요소가 이동한 후의 위치drop을 보면'이동 전에 그 위치의 요소drop에 의해 움직였다'는 인식이 돼'droppable 동작이 생겼다'는 문제가 생겼다.droppable의 규격을 자세히 검사하지 않았지만,drag가 시작되기 전에drop 대상의 좌표를 유지할 수 있습니다.

성공 방법

droppable 사용을 중지하고 (1)drag 대상, (2)drop 대상, (3) 마우스 포인터가 겹쳐진 상태에서 (stop)sortable 행동을 완료할 때drop으로 식별할 수 있도록 논리를 만들었습니다.

성공 코드 예

example.html

<nav>
  <ul class="nav-sites sortable">
    <li class="nav-site" data-id="35" data-type="Sites">
      <a href="/items/35/index">folder 1</a>
    </li>
    <li class="nav-site" data-id="37" data-type="Sites">
      <a href="/items/37/index">folder 1-1</a>
    </li>
    <li class="nav-site" data-id="36" data-type="Sites">
      <a href="/items/36/index">folder 2</a>
    </li>
  </ul>
</nav>

SiteMenu.js

$(function () {
    $('.nav-sites.sortable').sortable({

        // sortableの動作終了
        stop: function (event, ui) {

            // ドラッグ中の要素のデータを取得
            var siteId = ui.item.attr('data-id');

            // ドラッグ中の要素以外でマウスポインタと重なっている要素を取得
            var $element = getHoveredItem($('.nav-site:not([data-id="' + siteId + '"])'));

            // マウスポインタと重なっている要素があるか？
            if ($element) {

                // ドラッグ中の要素を非表示にする
                ui.item.hide();

                // 「入れ子関係変更」の処理を記述（サーバサイドにデータ送信）
                //
                //
            }
        },

        // sortableにより順番が入れ替わった
        update: function () {

            // 「並び替え」の処理を記述（サーバサイドにデータ送信）
            //
            //
        }
    });
});

Position.js

var mouseX;
var mouseY;

// マウス移動時にマウスポインタのXY座標をメモリに保持
$(window).mousemove(function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});

// マウスポインタが重なっている要素を返却
function getHoveredItem($elements) {
    var $element;
    $elements.each(function () {
        if (isHover($(this))) {
            $element = $(this);
            return false;
        }
    });
    return $element;
}

// マウスポインタが重なっているか判定
function isHover($element) {
    var left = $element.offset().left;
    var top = $element.offset().top;
    var right = left + $element.outerWidth();
    var bottom = top + $element.outerHeight();
    if (mouseX >= left &&
        mouseX <= right &&
        mouseY >= top &&
        mouseY <= bottom) {
        return true;
    } else {
        return false
    }
}

지원

마우스가 중첩된drop 대상을 호버에서 검색해 보았지만,drag에 숨겨진 요소 아래에 있기 때문에:호버가 반응하지 않습니다.따라서 마우스 포인터의 위치로 판정하는 논리다.이 부근에서 나는 조금만 더 노력하면 간단하게 할 수 있을 것이라고 생각한다.

참고 자료

다음 항목에서 사용합니다.만약 다른 실시례가 있다면 정보를 교환해 주십시오.
https://github.com/Implem/Implem.CodeDefiner
코드 예제의 JavaScript 파일이 여기에 있습니다.
https://github.com/Implem/Implem.CodeDefiner/tree/master/Implem.Outputs/Scripts