iframeでカスタムHTML要素を削除できるようにする

this exampleに似たiframe内のリストに要素をドロップすることができるリストがあります。私はthis threadで動作する解決策を見つけましたが、私の場合は<li>のもの以外の要素が必要です。あなたがhereを見ることができるように、この作品iframeでカスタムHTML要素を削除できるようにする

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

：

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

とiframeの内容：

は、ここに私のセットアップです。

<ul>と<li>年代を変更する場合それも<div>（exampleとiframe）に動作します。

私はカスタムタグに<foo>とit's workingと<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とソート可能なメソッドは私のカスタムhtmlタグでは機能しません。 <foo>,<bar>と<modules>,<module>の間には何が違いますか？

UPDATE

それがFFに罰金働いているだけであるためのWebKitブラウザ上の問題であるようだ - まだWindowsマシン上でテストすることができませんでした。

要素をドラッグすると、それはいくつかのインラインスタイルを取得する "ヘルパー" が作成されます：webkitsにそれだけposition、leftとrightを取得しながら、

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

を：

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

出典

2015-10-19 Xaver

それがhttps 'に私のために働いている：' iframe'を持っていることを考慮すると、// jsfiddle.net/8cx4pe2y/3/'' SRC =/dd9wf04w/4/show/' – hjpotter92

どのブラウザ/ OSですか？あなたは "要素"のリストに要素をドロップすることができますか？ – Xaver

ここでは動作しません：Chromeバージョン46.0.2490.71（64ビット）、OSX Yosemite 10.10.5 – ggzone

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

jsfidd le http://jsfiddle.net/zo2bx4f7/

出典

2015-10-25 04:17:51 guest271314

これが私のやり方です。賛否両論を得るために私はしばらく時間をとったが、ブラウザのサポートは今日はかなり良いですし、とにかく古いものをサポートする必要はありません。お疲れ様でした！ – Xaver

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>

出典

2015-10-28 09:56:50 misantronic

かなり良い！しかし、4文字の制限は奇妙です。あなたのご意見ありがとうございます！ – Xaver

iframeでカスタムHTML要素を削除できるようにする

答えて

関連する問題