dojo dnd는 프로그래밍 방식으로 노드를 움직입니다

Question

Dojo DND에서 노드를 프로그래밍 방식으로 움직일 수있는 방법이 있는지 알고 싶습니다. 그 이유는 웹 서비스 호출이 데이터베이스에서 저장 실패를 트리거했을 때 드래그 앤 드롭의 변경 사항을 되돌리고 싶기 때문입니다. 여기에 내가 지금까지 가지고있는 것이 있습니다.

내 코드에서 노드 ID는 dojo.dnd.container.delitem에 의해 인식되지 않은 것 같습니다. 비동기 웹 서비스 함수 콜백이기 때문에 대상에서 선택한 항목 만 사용할 수 없습니다. 따라서 사용자는 컨테이너가 호출되면 다른 노드를 선택할 수 있습니다.

function OnMoveWSComplete(strResult) {
    var resultObj = eval('(' + strResult + ')');
    var sourceContainer = eval('(' + objResult.sourceContainerId + ')');
    var targetContainer = eval('(' + objResult.targetContainerId + ')');

    var targetNodes = targetContainer.getAllNodes();
    for (var iNode = 0; iNode < targetNodes.length; iNode++) {
        var currId = getLastIdFromStr(targetNodes[iNode].id);

        if (currId == resultObj.Id) {
            var targetN = targetNodes[iNode];

            var Name = targetNodes[iNode].childNodes[0].nodeValue;

            targetContainer.delItem(targetNodes[iNode].id);
            var origData = { Id: resultObj.Id, Name: Name };
            sourceContainer.insertNodes(true, origData);

            break;
        }
    }
}

편집하다: 솔루션 (감사합니다. Eugene Lazutkin) [2009/11/30] :

/**
* Move one node from one container to the other
*/
function moveNode(nodeId, sourceContainer, targetContainer) {
    var node = dojo.byId(nodeId);

    // Save the data
    var saveData = sourceContainer.map[nodeId].data;

    // Do the move
    sourceContainer.parent.removeChild(node);
    targetContainer.parent.appendChild(node);

    // Sync the DOM object → map
    sourceContainer.sync();
    targetContainer.sync();

    // Restore data for recreation of data
    targetContainer.map[nodeId].data = saveData;
}

Answer 1

당신이 그렇게 가정하는 것처럼 보입니다 delItem 물리적 노드를 제거합니다. 살펴보십시오 선적 서류 비치 - 아마도 컨테이너간에 노드를 맵에서 삭제하는 대신 컨테이너 간 노드를 이동하려고합니다. 컨테이너간에 DOM 노드를 이동하고 sync() 두 컨테이너 모두.

덧셈: 다음은 초고시 유사 코드와 같은 예입니다.

function move(node, source, target){
  // normalize node and/or node id
  node = dojo.byId(node);
  // move it physically from one parent to another
  // (from target to source) adding to the end
  target.parent.appenChild(node);
  // now it is moved from source to target
  // let's synchronize both dojo.dnd.Source's
  source.sync();
  target.sync();
}

또는이 라인을 따라 무언가가 작동해야합니다. 중요한 조각 :

• 적절하다고 간주되는 DOM 작업을 사용하여 노드를 한 부모에서 다른 부모로 이동하십시오. 나는 사용했다 appendChild(), 그러나 사용할 수 있습니다 insertBefore(), 또는 다른 것.
• 이동 후 관련된 두 소스를 동기화합니다.

두 소스 모두 동일한 유형과 구조의 노드를 사용하는 경우 분명히 작동합니다. 그렇지 않다면, 당신은 더 복잡한 일을해야합니다. 예를 들어, 문서에 설명 된 주제를 게시하여 실제 DND 움직임을 모방하는 모든 것을 움직여야합니다.

Answer 2

버튼으로 선택한 노드를 움직이는이 기능이 있습니다.

source.forInItems(dojo.hitch(this, function(item, id, map) {
  if (dojo.hasClass(id, "dojoDndItemAnchor")) {
    target.onDrop(source, [ dojo.byId(id) ], false);
    dojo.removeClass(id, "dojoDndItemAnchor");
  }
}));

onDrop() 항목 낙하시 호출되고 기본적으로 메소드에 호출되는 재정의 방법입니다. onDropExternal(source, nodes, copy).

Answer 3

나는 지금 똑같은 일을하고 있습니다. 다음을 수행하여 해결할 수있었습니다.

• DND/SOURCE AutoSync 속성을 true로 설정하십시오

<div data-dojo-type="dojo.dnd.Source" accept="widget" class="source" data-dojo-props="autoSync: true">

드래그 후 DNDTYPE가 느슨해 지므로 클라이언트 측 코드를 사용하여 다시 추가해야했습니다. 또한 드롭 후 dojodnditemanchor 클래스를 제거합니다.

$(node).removeClass('dojoDndItemAnchor').attr('dndtype', 'widget');