Jquery 使自定义HTML元素在iframe中可拖放_Jquery_Html_Jquery Ui_Iframe

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

jquery html jquery-ui iframe

Jquery 使自定义HTML元素在iframe中可拖放,jquery,html,jquery-ui,iframe,Jquery,Html,Jquery Ui,Iframe,我喜欢有一个列表，可以在类似于的iframe中的列表中删除哪些元素。我通过找到了一个可行的解决方案，但就我而言，我需要的不是的元素以下是我的设置： <div id="container"> <ul> <li>To drop 1</li> <li>To drop 2</li> </ul> </div> <iframe id="frame" src=

我喜欢有一个列表，可以在类似于的iframe中的列表中删除哪些元素。我通过找到了一个可行的解决方案，但就我而言，我需要的不是

的元素

以下是我的设置：

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

在webkits上，它只获得

位置

、

左侧

和

右侧

：

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

尝试使用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>


（e）上的函数{
e、 预防默认值（）；
}
函数拖动（e）{
e、 dataTransfer.setData（“text”，例如target.dataset.id）；
}
功能下降（e）{
e、 预防默认值（）；
var data=e.dataTransfer.getData（“文本”）；
e、 target.appendChild(
parent.document.querySelector（“[data id=”+data+“]]”）
);
}
window.onload=函数（）{
var mods=document.querySelector（“模块”）；
var script=document.getElementById（“dnd”）；
var iframe=document.querySelector（“iframe”）；
iframe.src=URL.createObjectURL(
新斑点(
[“”+script.outerHTML+mods.outerHTML]
，{“类型”：“text/html”}
)
);
}

删除1
以拖放2

元素
元素
元素
李小姐{
边框：1px实心#000；
显示：块；
列表样式：无；
保证金：0；
填充物：5px；
}

jshiddle

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

看看这个：

Sortable.create（document.getElementById（'Sortable-1'），{}）；
create（document.getElementById（'Sortable-2'），{}）；
create（document.getElementById（'Sortable-3'），{}）；
create（document.getElementById（'Sortable-4'），{}）
foo，
模，模，模{
显示：块；
}
foo>bar，
模块，
模块>模块，
模块>模块{
显示：块；
填充：10px；
边框：1px纯蓝色；
保证金：5px0；
}

富1
富2
富3



modu 1
modu 2
modu 3



模1
模2
模块3



单元1
模块2
单元3
它在https://jsfiddle.net/8cx4pe2y/3/
，考虑到iframe
具有src=/dd9wf04w/4/show/
哪个浏览器/os？你能在“元素”列表中添加一个“todrop”元素吗？这里不起作用：Chrome版本46.0.2490.71（64位），OSX Yosemite 10.10.5Chrome在Windows上不起作用。Windows10上的Edge实际上可以正常工作，但很笨重。Windows上的IE11工作不一致，而且笨重。使用iframes时，您所做的并不是一个好主意。我相信有更好的方法来解决这个问题。你到底想达到什么目的？这是什么样的应用程序？使用iframe对您来说将是一场艰苦的战斗。我是根据这里的经验说的，我就是这样做的。我花了一段时间才弄清楚优点和缺点，但是现在浏览器支持非常好，而且我也不需要支持旧的。谢谢你的努力！不错！4个字母的限制很奇怪。谢谢你的意见！
position:absolute;left:XXXpx;right:XXXpx;width:XXXpx;heightXXXpx;z-index:1000

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

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