playground
/
Sortable
mirror of https://github.com/RubaXa/Sortable.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

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

pull/309/head
RubaXa 10 years ago
parent
7309734dbf
commit
8b818ed280
3 changed files with 91 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      Sortable.js
  2. 32
      st/iframe/frame.html
  3. 49
      st/iframe/index.html

17
Sortable.js
Unescape View File

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

32
st/iframe/frame.html
Unescape View File

@ -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
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save