.show()不适用于IE

时间:2012-01-22 04:13:46

标签: javascript jquery internet-explorer internet-explorer-9

我正在研究这个项目:http://www.arbamedia.com/test/ 如果你去左侧菜单上的 Dyer dhe dritare 并将其中一个元素(门或窗口)拖到Chrome和FF的右侧(桌面),我添加了3个选项对于那些元素显示,所以这个:$("p", this).show();有效,但在IE9中,当我拖动一个元素时,它没有显示拖动,旋转或删除的选项!我不知道出了什么问题。

这就是它发生的地方:

$(".drag").draggable({
  revert      : 'invalid', 
  helper      : 'clone',
  containment : 'desk',
  cursorAt    : { left:-11,top:-1 },

  //When first dragged
  stop        : function(ev, ui) {
    /*========================================================================*/
    var pos = $(ui.helper).offset();
    var left_   = ev.originalEvent.pageX - $("#desk").position().left;
    var top_    = ev.originalEvent.pageY - $("#desk").position().top;
    // get widht and height of the container div#desk element
    var w_ = $("#desk").width();
    var h_ = $("#desk").height();
    objName  = "#clonediv"+counter++;
    objNamex = "clonediv"+counter;
    $(objName).css({"left":left_,"top":top_});

    var gag =  0;
    $(objName).click(function () {
      $("p", this).show();
      $(this).addClass("selektume");
      $('.rotate_handle').unbind('click');
      $('.rotate_handle').click(function(){
        gag += 45;
        $('.selektume').rotate(gag+'deg');
      });
      $('.delete_handle').click(function() {
        $('.selektume').remove();
      });
      return false;
    });

    $(document).click(function () {
      $("p").hide();
      $(".lgutipT").removeClass("selektume");
    });

    //check if dropped inside the conteiner div#des
    if((left_ >= 0) && (left_ <= w_) && (top_ >= 0) && (top_ <= h_))
    {
      $(objName).css({"left":left_,"top":top_});

      // assign a z-index value
      zindex = left_ + top_;
      $(objName).css({"z-index":zindex});
      $(objName).addClass("lgutipT");
      //$(objName).addClass("ui-widget-content");

      $(objName).removeClass("drag");
      $(objName).append('<p><img class="handler"  src="images/move_button.png"><img class="rotate_handle" src="images/rotate_button.png"><img class="delete_handle" src="images/delete_button.png"></p>');
      $("p", this).show();
    }


    /*========================================================================*/

    //When an existiung object is dragged
    $(objName).draggable({
      containment : "#desk",
      handle      : ".handler",
      cursor      : "move"
    });
  }
});

1 个答案:

答案 0 :(得分:1)

非常棘手的问题,因为没有关于jQuery UI如何在核心级别处理事件的良好文档。解决方案是取消绑定并重新绑定click事件。在IE中,click事件的处理方式与其他浏览器不同。解决方案只是在完成所有操作(1/1000秒延迟)后重新绑定click事件。

我的解决方案是移动click事件,在拖动开始时添加解除绑定,并在拖动完成时添加setTimeout()重新绑定$(document).click()事件侦听器。

查看以下来源以查看有效的解决方案。

http://jsfiddle.net/MattLo/AbF6t/

将HTML复制并粘贴到您的开发环境中。