IEではjQuery UIでsortableしたエレメントをドラッグ削除できない

表題のとおりで、ちょっとハマった。

<ul id="sortable">
  <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>
</ul>
<div id="trash" style="border:1px solid">
  ここにドラッグすると削除
</div>

<script>
$(document).ready(function(){
  $("#sortable").sortable();
  $("#trash").droppable({
    hoverClass: "ui-state-hover",
    drop: function( event, ui ){
      ui.draggable.remove();
    }
  });
});
</script>

問題再現Demo

上記DemoをIEで利用すると削除できないのが確認できると思います。
当然、IE以外では問題なし。

で、フォーラムをぐぐって、同じ問題の報告を発見

IE won’t remove dropped draggables

今回はこのフォーラムにあったsetTimeoutで回避する方法を採用して決着

  $("#trash").droppable({
    hoverClass: "ui-state-hover",
    drop: function( event, ui ){
      if($.browser.msie){
        //ieでremoveできない問題対応
        var temp = ui.draggable.empty();
        setTimeout(function(){temp.remove()},100);
      }
      else{
        ui.draggable.remove();
      }
    }
  });
This entry was posted in blog and tagged , . Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>