드래그 앤 드롭으로 로컬 데이터로드

드래그하기 전과 드래그하기 전에 로컬 데이터로드 .load ("file_from_local.html"); 어떻게 목록이 될 수 있을까 ??드래그 앤 드롭으로 로컬 데이터로드

function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    $("#div2").load("file_from_local.html"); 
 
}

#div1, #div2 { 
 
    float: left; 
 
    width: 100px; 
 
    height: 500px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
    <img src="http://www.w3schools.com/css/trolltunga.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> 
 
</div> 
 
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

출처

2016-11-23 Arif Dwi Saputra

당신이 달성하려고? – RizkiDPrast

참고 : 나는 당신이 뭘 하려는지에 조금 혼란 스러워요하지만 그렇다고하더라도 작동하지 않는 코드는 거기에서 시작할 수 있습니다.

jquery없이이 작업을 수행 할 수 있습니다. 간단한 JS가 작동합니다.

<style> 
 
.div1, .div2 { 
 
    width: 350px; 
 
    height: 60px; 
 
    padding: 10px; 
 
    display:inline-block; 
 
    border: 1px solid #aaaaaa; 
 
} 
 
</style> 
 
<script> 
 
function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

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

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
} 
 
</script> 
 
</head> 
 
<body> 
 

 
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
<br> 
 
<div class="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
<br> 
 
<img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

출처

2016-11-23 05:51:13

드래그 앤 드롭으로 로컬 데이터로드

답변

관련 문제