0

I'm using Crossrider, I want to add a draggable div to the page's DOM.
The following code works well on Chrome and Firefox, and the dragstop handler function is fired for both Chrome and Firefox without any problems.
But for IE, the div is draggable once ! i.e. Once the div is dropped, it cannot be dragged again, and more strange is that the dragstop event handler is not fired at all in IE !?

How to fix this in IE !?

Here is the code:

extension.js file

appAPI.ready(function(jQuery) {              
    appAPI.resources.jQueryUI('1.10.1'); 
    appAPI.resources.includeCSS('styles.css');
    var $div = jQuery('<div class="square" ></div>').appendTo('body');
    $div.draggable( {containment: "window", scroll: false} );
    $div.bind('dragstop', function() {
        console.log("drag stopped ..."); 
    }); 
});

styles.css file

.square {
    display:block; 
    z-index: 1000001; 
    background-color: #000000; 
    height: 100px; 
    width: 100px;
    top: 0px;
    left: 0px;
    position: fixed;
}

Kindly note, that I tried the code without crossrider and I run it on IE, it works well.
You can try it by using this link: http://jsfiddle.net/GHaMV/

Kara
  • 6,115
  • 16
  • 50
  • 57
Ashraf Bashir
  • 9,686
  • 15
  • 57
  • 82

2 Answers2

2

I ran into the same problem using Crossrider and managed to fix the issue by declaring a handler function that returns the draggable element, so your code should look as follows:

$div.draggable({
      containment: window,
      helper: function() {
          return $div;
      }
});

Hope it helps...

Arik
  • 5,266
  • 1
  • 27
  • 26
0

There is no dragstop event, just the stop hook (see the docs):

Use it like this:

$div.draggable({
    containment: "window",
    scroll: false,
    stop: function() {
        console.log("drag stopped ..."); 
    }
});
Simon
  • 7,182
  • 2
  • 26
  • 42
  • Thanks Simon for your reply. But the same problem exists for "stop". The problem isn't in jQueryUI and IE. As you may see in my example, the code using "dragstop" is working well in IE pages, but not when fired from crossrider extensions in IE. The same problem exists for "stop" when running crossrider extensions on IE. – Ashraf Bashir Mar 14 '13 at 15:42
  • 1
    Well the code you provided didn't work for me (just the dragstop part) in FF so I thought there was a general issue with it. – Simon Mar 14 '13 at 16:15