jQuery UI 에서 draggable 과 droppable 사용시, "'data(...).options'은(는) null 이거나 개체가 아닙니다." 메시지가 나온다면..

jQuery UI 에서 draggable 과 droppable 사용시, "'data(...).options'은(는) null 이거나 개체가 아닙니다." 메시지가 나온다면..

옵션을 여러번 사용하지 말고, json 방식으로 한 방에 사용하면 어떨까 싶네요.

idDrop1 영역에 idDrag1 에 있는 이미지를 가져다 맞추는 퍼즐기능에서..

정확한 영역에 drop 한 다음,

idDrag1 의 이미지를 다른 곳에서 사용하지 못하도록 revert invalid 와 disable 세팅을 했더니,

idDrag1 에 사용된 이미지에 opacity 가 먹어서 투명하게 되었어요.

opacity 옵션을 수정해도 disable 처리된 이후에는 투명도를 수정할 수가 없더라구요.

그래서 destroy 옵션을 세팅하니까 투명도 문제는 해결이 되는데,

이렇게 하니까 "'data(...).options..." 오류가 뜨잖아요.

이리저리 해 보고 찾아보고 했는데, 해결을 못하다가.. 옵션을 한방에 날리니까 해결이 되네요.

아래 코드는 자바스크립트 오류가 발생하는 코드.

<div id="idDrag1" num="1" class="draggable">..</div>

<div id="idDrop1">..</div>

<script>

  $(document).ready(function(){

    $('.draggable').draggable({ revert: "valid" });

    $('#idDrop1').droppable({

      drop:function(e,ui){

        if(ui.draggable.attr('num')==1){

          $('#idDrag1').draggable({ revert:'invalid' }).draggable('destroy'); // 오류 발생

        }

      }

    });

});

</script>

아래 코드는 자바스크립트 오류를 해결한 코드.

<div id="idDrag1" num="1" class="draggable">..</div>

<div id="idDrop1">..</div>

<script>

  $(document).ready(function(){

    $('.draggable').draggable({ revert: "valid" });

    $('#idDrop1').droppable({

      drop:function(e,ui){

        if(ui.draggable.attr('num')==1){

          $('#idDrag1').draggable({ revert:'invalid', 'destroy':true }); // 오류 없어짐

        }

      }

    });

});

</script>

더불어서.. 특정 영역이 해당 영역에 들어갈 이미지 보다 커서, 영역 중앙에 표시가 되게 하려면..

상기 코드에서 .css({left:.., top:..}) 를 추가하면 되겠네요.

상기 코드는..