YUI dragdrop 플러그인을 사용하는 여러 개의 드롭 타겟?

기본적으로이 YUI 예제/데모를 확장하여 요소가 요소로 드래그 될 때 '대상'상자 하나를 업데이트하는 대신 여러 대상 상자를 선택할 수 있도록합니다. 공식 야후의 예는 http://developer.yahoo.com/yui/3/examples/dd/delegate-drop.html YUI dragdrop 플러그인을 사용하는 여러 개의 드롭 타겟?

에서 관련 코드를 찾을 수 있습니다

<div id="play"> 

    <div id="demo"> 
     <ul> 
      <li>Item #1</li> 
      <li>Item #2</li> 
      <li>Item #3</li> 
      <li>Item #4</li> 
      <li>Item #5</li> 
      <li>Item #6</li> 
      <li>Item #7</li> 
      <li>Item #8</li> 
      <li>Item #9</li> 
      <li>Item #10</li> 
     </ul> 
    </div> 

    <div id="drop">Drop on me</div> 
</div> 

<script> 

YUI({ filter: 'raw' }).use('dd-delegate', 'dd-drop-plugin', function(Y) { 
    var del = new Y.DD.Delegate({ 
     container: '#demo', 
     nodes: 'li' 
    }); 

    del.on('drag:end', function(e) { 
     del.get('currentNode').setStyles({ 
      top: 0, 
      left: 0 
     }); 
    }); 

    var drop = Y.one('#drop').plug(Y.Plugin.Drop); 
    drop.drop.on('drop:hit', function(e) { 
     drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>'); 
    }); 


}); 
</script>

나는 일 동안 구축을 위해 노력했습니다하지만 난 이해가 안 돼요 너무 많은 요인이있다. 내가 한 가지 방법은 각 대상 상자를 순환하고 'var drop = Y.one ...'등의 바인딩을 수행하는 루프를 작성하는 것이었지만 결과는 어떤 상자를 드래그했는지에 관계없이 마지막 하나는 (내가 생각하는 자바 스크립트에서 폐쇄와 관련이 있기 때문에) 업데이 트됩니다

편집 : 말할 것도없고, 나는 많은 대상이 '대상 컨테이너'안에 비슷한 일이 드롭 기능을 적용하려면 YUI가 필요합니다 드래그 요소가 설정되는 방법. 나는 얼마나 많은 사람들이 사전에 있을지 모르기 때문에 각 div를 무시할 수 없다.

출처

2011-01-28 Andrew M

하나의 해결 방법은 드롭 선택기를 "all"로 업데이트하고 nodeSet에서 각각을 반환하는 것입니다. (대신 '#drop'로 지정된 단일 노드 드롭 목표를 가지고, 당신은 '드롭'의 클래스로 지정 여러 가질 수 있습니다.)

var dropNodes = Y.all('.drop').plug(Y.Plugin.Drop); 
dropNodes.each(function(v, k) { 
    var tar = new Y.DD.Drop({ 
     node: v 
     }); 
    });

는 또한 DDM (드래그 앤 드롭 관리자를 사용하는 것이 도움이 될 것입니다)를 사용하여 각 놓기 대상에 리스너를 추가하는 대신 이벤트를 수신합니다.

Y.DD.DDM.on('drag:drophit', function(e) { 
    var drop = e.drop.get('node'), 
     drag = e.drag.get('node'); 
    drop.set('innerHTML', 'You dropped: <strong>' + drag.get('innerHTML') + '</strong>'); 
});

뿐만 아니라 복수의 타겟/드래그 인스턴스를 설정()를 사용 nodeSet.each 같이 DDM에 대한 자세한 Drag & Drop: List Reorder w/Bubbling 예를 참조.

출처

2011-05-08 00:12:13 kaia

YUI dragdrop 플러그인을 사용하는 여러 개의 드롭 타겟?

답변

관련 문제