html5sortable: Sortable not working with iframes

Sortable 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>

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (9 by maintainers)

Most upvoted comments

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.

webarthur on Jan 14, 2020