आईफ़्रेम

में कस्टम HTML तत्व ड्रॉप करने योग्य बनाएं मुझे एक सूची है जिसमें this example के समान आईफ़्रेम में किसी सूची में तत्वों को छोड़ दिया जा सकता है। मुझे 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 देख सकते हैं।

यह भी जब <div> (example और iframe) को <ul> और <li> के बदलते काम करता है।

जब मैं कस्टम टैग 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 है।

तो मूल रूप से खींचने योग्य और sortable विधि मेरी कस्टम HTML टैग के साथ काम नहीं कर रहा है। <foo>, <bar> और <modules>, <module> के बीच इतना अलग क्या है?

अद्यतन

ऐसा लगता है इस वेबकिट ब्राउज़रों केवल क्योंकि यह एफएफ पर ठीक काम कर रहा है पर एक मुद्दा है - अभी तक एक Windows मशीन पर परीक्षण करने के लिए सक्षम नहीं था।

जब तत्व यह पैदा करेगा "सहायक" जो कुछ इनलाइन शैली हो जाता है खींच:

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

webkits पर, जबकि यह केवल मिल position, left और right:

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

स्रोत

2015-10-19 Xaver

यह 'पर https मेरे लिए काम कर रहा है: // jsfiddle.net/8cx4pe2y/3 /' 'पर विचार iframe' है कि' src =/dd9wf04w/4/शो/' – hjpotter92

कौन सा ब्राउजर/ओएस?क्या आप "तत्व" की सूची में "ड्रॉप" तत्व प्राप्त कर सकते हैं? – Xaver

यहां काम नहीं कर रहा है: क्रोम संस्करण 46.0.2490.71 (64-बिट), ओएसएक्स योसाइट 10.10.5 – ggzone

उपयोग करने का प्रयास एचटीएमएल 5 खींचें और छोड़ें

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

आईफ़्रेम

उत्तर

संबंधित मुद्दे