Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Sortable not working with iframes
See original GitHub issueSortable not working with iframes:
index.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>HTML5 Sortable library</title>
<link rel="stylesheet" href="basscss.css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="html5sortable.js"></script>
</head>
<body>
<iframe src="frame.html" width="500" height="600" style="float:left"></iframe>
<div style="width: 300px; float:left">
<ul class="o-sortable list flex flex-column list-reset">
<li class="p1 mb1 border border-white white bg-orange">Item 1</li>
<li class="p1 mb1 border border-white white bg-orange">Item 2</li>
<li class="p1 mb1 border border-white white bg-orange">Item 3</li>
</ul>
</div>
<script>
sortable('.o-sortable', {
copy: true,
forcePlaceholderSize: true,
placeholderClass: 'ph-class',
hoverClass: 'bg-maroon yellow'
})
</script>
</body>
frame.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>HTML5 Sortable library</title>
<link rel="stylesheet" href="basscss.css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="html5sortable.js"></script>
</head>
<body>
<div>
<ul class="o-sortable2 list flex flex-column list-reset">
<li class="p1 mb1 border border-white white bg-orange">Item 1</li>
<li class="p1 mb1 border border-white white bg-orange">Item 2</li>
<li class="p1 mb1 border border-white white bg-orange">Item 3</li>
</ul>
</div>
<script>
sortable('.o-sortable2', {
acceptFrom: '.o-sortable',
forcePlaceholderSize: true,
placeholderClass: 'ph-class',
hoverClass: 'bg-maroon yellow'
})
</script>
</body>
Issue Analytics
- State:
- Created 4 years ago
- Comments:17 (9 by maintainers)
Top Results From Across the Web
Cannot drop over iframe (not into - but absolutely on top of an ...
Hey guys, I ran into a really weird bug in Chrome when you are sorting OVER an iframe via absolute positioned containers.
Read more >jQuery UI draggable + sortable in iframe - wrong vertical offset
When I try to drag element to iframe, it is working fine. But, when iframe is scrolled down and I start dragging draggable...
Read more >Sortable with an iframe breaks in Firefox but not other browsers
The problem is this: while dragging within the <iframe>, the mouse pointer can become disassociated with the handle. In my REAL application, ...
Read more >9604 (Sortable: Add support for use in iframes) - jQuery UI
I've found out that sortable fails completely when called out from parent document, on elements within an iframe. It would seem to me...
Read more >VueDraggable within iframe (NOT working with Sortable 1.8.1 ...
Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Awesome article! I will do some tests. I don’t know if it possible work with iframes in codepen or jsfiddle but I will try too.
As for “freezes” I have used to describe the list that isn’t sorting. I think I haven’t used the best word to describe the issue, sorry.
Okay, so the problem is the following: As of now, if you add the
acceptFromproperty you need to include the list itself as well, to allow items to drop back.This works: