Browse Source

#288: + use 'ownerDocument' for correct working with/into iframe

pull/309/head
RubaXa 10 years ago
parent
commit
8b818ed280
  1. 17
      Sortable.js
  2. 32
      st/iframe/frame.html
  3. 49
      st/iframe/index.html

17
Sortable.js

@ -269,8 +269,9 @@
target = (touch || evt).target, target = (touch || evt).target,
originalTarget = target, originalTarget = target,
options = this.options, options = this.options,
filter = options.filter,
el = this.el, el = this.el,
filter = options.filter; ownerDocument = el.ownerDocument; // for correct working with/into iframe
if (type === 'mousedown' && evt.button !== 0 || options.disabled) { if (type === 'mousedown' && evt.button !== 0 || options.disabled) {
return; // only left button or enabled return; // only left button or enabled
@ -343,9 +344,9 @@
evt.preventDefault(); evt.preventDefault();
} }
_on(document, 'mouseup', this._onDrop); _on(ownerDocument, 'mouseup', this._onDrop);
_on(document, 'touchend', this._onDrop); _on(ownerDocument, 'touchend', this._onDrop);
_on(document, 'touchcancel', this._onDrop); _on(ownerDocument, 'touchcancel', this._onDrop);
_on(dragEl, 'dragend', this); _on(dragEl, 'dragend', this);
_on(rootEl, 'dragstart', this._onDragStart); _on(rootEl, 'dragstart', this._onDragStart);
@ -617,10 +618,12 @@
}, },
_offUpEvents: function () { _offUpEvents: function () {
_off(document, 'mouseup', this._onDrop); var ownerDocument = this.el.ownerDocument;
_off(document, 'touchmove', this._onTouchMove); _off(document, 'touchmove', this._onTouchMove);
_off(document, 'touchend', this._onDrop); _off(ownerDocument, 'mouseup', this._onDrop);
_off(document, 'touchcancel', this._onDrop); _off(ownerDocument, 'touchend', this._onDrop);
_off(ownerDocument, 'touchcancel', this._onDrop);
}, },
_onDrop: function (/**Event*/evt) { _onDrop: function (/**Event*/evt) {

32
st/iframe/frame.html

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<!-- List with handle -->
<div id="listWithHandle" class="list-group">
<div class="list-group-item">
<span class="badge">14</span>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
Drag me by the handle
</div>
<div class="list-group-item">
<span class="badge">2</span>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
You can also select text
</div>
<div class="list-group-item">
<span class="badge">1</span>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
Best of both worlds!
</div>
</div>
</body>
</html>

49
st/iframe/index.html

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFrame playground</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<!-- Latest Sortable -->
<script src="../../Sortable.js"></script>
<!-- Simple List -->
<div id="simpleList" class="list-group">
<div class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></div>
<div class="list-group-item">It works with Bootstrap...</div>
<div class="list-group-item">...out of the box.</div>
<div class="list-group-item">It has support for touch devices.</div>
<div class="list-group-item">Just drag some elements around.</div>
</div>
<script>
(function () {
Sortable.create(simpleList, {group: 'shared'});
var iframe = document.createElement('iframe');
iframe.src = 'frame.html';
iframe.width = '100%';
iframe.onload = function () {
var doc = iframe.contentDocument,
list = doc.getElementById('listWithHandle');
Sortable.create(list, {group: 'shared'});
};
document.body.appendChild(iframe);
})();
</script>
</body>
</html>
Loading…
Cancel
Save