CODEWITHSUNDEEP
jqueryjquery-uiweb
PSA
PSA

Reputation: 225

jquery ui dragging over iframe lost the drag

When make a fast dragging of an element when it is over an iframe the element lost the drag...

Example: http://jsfiddle.net/pedrodsa/m9kveakv/1/

<h3>Pick a number on the SIDE MENU and drag t inside the iframe. Then make a fast drag (in order the mouse goes out the number div area)</h3>

<div class="container">
    <div class="side-menu">
        SIDE MENU
        <ul id="draggable">
          <li class="ui-state-default">1</li>
          <li class="ui-state-default">2</li>
          <li class="ui-state-default">3</li>
          <li class="ui-state-default">4</li>
          <li class="ui-state-default">5</li>
        </ul>
    </div>
    <div class="content">

        <iframe src="http://www.w3schools.com"></iframe>

    </div>

</div>

Upvotes: 0

Views: 783

Answers (2)

Gnanadurai Asudoss
Gnanadurai Asudoss

Reputation: 287

$( "#draggable li" ).draggable({
     revert: true,
     iframeFix: true

 });

Try this... this is working....

Upvotes: 4

Barr J
Barr J

Reputation: 10927

Checked it, The thing is that the drag work as long as the mouse pointer stays on the number, once the mouse pointer loses focus of the number, the number loses the drag. You need to find a way to keep the mouse pointer focused on the number, or else to make the numbers drag able even when they lose focus.

Upvotes: 0

Related Questions