무툴즈:드래그 앤 드롭 문제

Question

나는 Mootools 웹사이트의 포럼에 이 질문을 했는데 한 사람은 관리자가 와서 내 게시물 상태를 유효하지 않은 것으로 변경하기 전에 내 수업 선택이 손상되었다고 말했습니다.말할 필요도 없이 이것은 별로 도움이 되지 않았습니다.그런 다음 응답 없이 mootools에 대한 Google 그룹에 게시했습니다.제 질문은 '.drop' 요소에 대해 'enter', 'leave', 'drop' 이벤트가 실행되지 않는 이유는 무엇입니까?.drag 요소에 대한 이벤트가 작동 중입니다.

<title>Untitled Page</title>
<script type="text/javascript" src="/SDI/includes/mootools-1.2.js"></script>
<script type="text/javascript" src="/SDI/includes/mootools-1.2-more.js"></script>
<script type="text/javascript" charset="utf-8">
    window.addEvent('domready', function() {
        var fx = [];
        $$('#draggables div').each(function(drag){
            new Drag.Move(drag, {
                droppables: $$('#droppables div'),
                onDrop: function(element, droppable){
                    if(!droppable) {
                    }
                    else {
                        element.setStyle('background-color', '#1d1d20');
                    }
                    element.dispose();
                },
                onEnter: function(element, droppable){
                    element.setStyle('background-color', '#ffffff');
                },
                onLeave: function(element, droppable){
                    element.setStyle('background-color', '#000000');
                }
            });
        });

        $$('#droppables div').each(function(drop, index){
            drop.addEvents({
                'enter': function(el, obj){
                    drop.setStyle('background-color', '#78ba91');
                },
                'leave': function(el, obj){
                    drop.setStyle('background-color', '#1d1d20');
                },
                'drop': function(el, obj){
                    el.remove();
                }
            });
        });
    });
</script>

<form id="form1" runat="server">
<div>
    <div id="draggables">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

<div id="droppables">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
</div>

</div>
</form>

Answer 1

네, 여기에는 몇 가지 문제가 있는 것 같습니다.내가 아는 한, mootools에는 "droppable"이라는 것이 없습니다.이는 'enter', 'leave' 및 'drop'과 같은 이벤트가 작동하지 않음을 의미합니다.(드래그 개체에 대한 이벤트입니다)

해당 이름을 mootools의 요소에 있는 이벤트(DOM 이벤트와 같이)로 변경하면 코드가 완벽하게 작동합니다.예를 들어 'enter' 및 'leave'를 'mouseover' 및 'mouseout'으로 변경하면 이벤트가 문제 없이 실행됩니다.(Windows Vista의 경우 Opera 9.51)

이는 문서에서 DOM 이벤트 사용에 대한 통계와 관련된 내용인 것으로 보입니다.

http://docs.mootools.net/Element/Element.Event#Element:addEvents

또한 해당 페이지에는 일반 요소가 가질 수 있는 이벤트에 대한 링크가 있습니다.

http://www.w3schools.com/html/html_eventattributes.asp

하지만, nabble 포럼에서 "SD in TG"라는 조언을 들었습니다. 아마도 최선일 것입니다.가능하다면 이러한 이벤트를 사용하지 마십시오.필요한 모든 작업을 드래그 가능한 개체에 넣고 이 모든 번거로움을 피하세요.

Answer 2

에 따르면 무툴즈 문서, "droppables"는 예상되는 옵션 중 하나입니다. Drag.Move 수업.실제로 이는 요소가 "를 실행할 때 요소와 상호 작용하는 요소의 배열입니다.drop," "enter," 그리고 "leave" 이벤트.