CODEWITHSUNDEEP
javascriptjqueryinternet-explorerinternet-explorer-9
Igor Ivanovski
Igor Ivanovski

Reputation: 415

.show() doesnt work on IE

I am working on this project: http://www.arbamedia.com/test/ if you go to Dyer dhe dritare on the left menu and drag one of the elements (the door or the window) into the right side (the desk) in Chrome and FF the 3 options that I have added for that elements show, so this: $("p", this).show(); works, but in IE9 when I drag an element it doesn't show the the options for dragging, rotating or deleting! I dont know what is wrong.

This is where it happens:

$(".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"
    });
  }
});

Upvotes: 0

Views: 169

Answers (1)

Matt Lo
Matt Lo

Reputation: 5731

Very tricky problem since there's no good documentation on how jQuery UI treats events at a core level. The solution was to unbind and rebind the click event. In IE, the click event is treated differently than other browsers. The solution was simply to rebind the click event after everything is done (1/1000 of a second delay).

My solution was to move the click event, add an unbinding on drag start, and to add a setTimeout() on rebinding the $(document).click() event listener when drag was complete.

View the source below to view the working solution.

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

Copy and Paste the HTML to your dev environment.

Upvotes: 1

Related Questions