使自定义 HTML 元素在 iframe 中可拖放答案

【问题标题】：Make custom HTML elements droppable in iframe使自定义 HTML 元素在 iframe 中可拖放
【发布时间】：2016-01-17 19:45:39
【问题描述】：

我喜欢有一个列表，可以将哪些元素放入类似于this example 的 iframe 中的列表中。我通过this thread 找到了一个可行的解决方案，但就我而言，我需要<li> 以外的其他元素。

这是我的设置：

<div id="container">
    <ul>
        <li>To drop 1</li>
        <li>To drop 2</li>
    </ul>
</div>
<iframe id="frame" src=""></iframe>

和 iframe 内容：

<ul id="sortable">
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
</ul>

如您所见here.

它甚至可以在将 <ul> 和 <li> 更改为 <div>（example 和 iframe）时工作。

当我将自定义标签 it's working 与 <foo> 和 <bar> 标签一起使用时，但我真正需要的是让它与 <modules> 和 <module> 标签一起使用。

<foo id="sortable">  //WORKS!!
    <bar>Element</bar>
    <bar>Element</bar>
    <bar>Element</bar>
</foo>

<modules id="sortable"> //DOESN'T WORK!!
    <module>Element</module>
    <module>Element</module>
    <module>Element</module>
</modules>

这是我实际需要工作的the fiddle 和iframe。

所以基本上 draggable 和 sortable 方法不适用于我的自定义 html 标签。 <foo>、<bar> 和 <modules>、<module> 之间有什么不同？

更新

这似乎只是 webkit 浏览器上的一个问题，因为它在 FF 上运行良好 - 还不能在 Windows 机器上进行测试。

当拖动元素时，它会创建一个“助手”，它会获得一些内联样式：

position:absolute;left:XXXpx;right:XXXpx;width:XXXpx;heightXXXpx;z-index:1000

在 webkits 上它只能得到 position、left 和 right：

position:absolute;left:XXXpx;right:XXXpx;

【问题讨论】：

考虑到iframe 有src=/dd9wf04w/4/show/，它在https://jsfiddle.net/8cx4pe2y/3/ 上为我工作
哪个浏览器/操作系统？您能否将“To drop”元素放入“Element”列表中？
在这里不工作：Chrome 版本 46.0.2490.71（64 位），OSX Yosemite 10.10.5
Chrome 在 Windows 上不起作用。 Windows 10 上的 Edge 实际上可以工作，但很笨重。 Windows 上的 IE11 工作不一致，而且很笨重。对于 iframe，您正在做的事情确实不是一个好主意。我确信有更好的方法来解决这个问题。你真正想要达到什么目的？这是一个什么样的应用程序？使用iframe 对您来说将是一场艰苦的战斗。我是根据这里的经验说话的。

标签： jquery html jquery-ui iframe

【解决方案1】：

Sortable 也会出现同样的问题。
我发现这是因为标签的长度。总长度不得超过 4 个字符。

看看这个fiddle：

Sortable.create(document.getElementById('sortable-1'), {});
Sortable.create(document.getElementById('sortable-2'), {});
Sortable.create(document.getElementById('sortable-3'), {});
Sortable.create(document.getElementById('sortable-4'), {});

foo,
modu, modul, modules {
    display: block;
}

foo > bar,
modu > module,
modul > module,
modules > module {
    display: block;
    padding: 10px;
    border: 1px solid blue;
    margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>

<foo id="sortable-1">
    <bar>foo 1</bar>
    <bar>foo 2</bar>
    <bar>foo 3</bar>
</foo>

<br/><br/>

<modu id="sortable-2">
    <module>modu 1</module>
    <module>modu 2</module>
    <module>modu 3</module>
</modu>

<br/><br/>

<modul id="sortable-3">
    <module>modul 1</module>
    <module>modul 2</module>
    <module>modul 3</module>
</modul>

<br/><br/>

<modules id="sortable-4">
    <module>modules 1</module>
    <module>modules 2</module>
    <module>modules 3</module>
</modules>

【讨论】：

相当不错！不过，4 个字母的限制很奇怪。感谢您的意见！

【解决方案2】：

尝试使用 HTML5 拖放

<script id="dnd">
  function over(e) {
    e.preventDefault();
  }

  function drag(e) {
    e.dataTransfer.setData("text", e.target.dataset.id);
  }

  function drop(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    e.target.appendChild(
      parent.document.querySelector("[data-id='" + data + "']")
    );
  }

  window.onload = function() {
    var mods = document.querySelector("modules");    
    var script = document.getElementById("dnd");   
    var iframe = document.querySelector("iframe");
    iframe.src = URL.createObjectURL(
      new Blob(
        ["<!doctype html>" + script.outerHTML + mods.outerHTML]
        , {"type": "text/html"}
      )
    );
  }
</script>
<div id="container">
  <ul>
    <li data-id="1" ondragstart="drag(event)" draggable="true">To drop 1</li>
    <li data-id="2" ondragstart="drag(event)" draggable="true">To drop 2</li>
  </ul>
</div>
<modules ondrop="drop(event)" ondragover="over(event)">
  <module>Element</module>
  <module>Element</module>
  <module>Element</module>
  <style>
    module, li {
      border:1px solid #000;
      display:block;
      list-style:none;
      margin:0;
      padding:5px;
    }
  </style>
</modules>
<iframe src=""></iframe>

jsfiddle http://jsfiddle.net/zo2bx4f7/

【讨论】：

我就是这样做的。我花了一段时间来了解优点和缺点，但现在浏览器支持非常好，而且我不必支持旧版本。感谢您的努力！