2016-11-23 4 views
0

перед перетаскиванием и после перетаскивания там загружаются данные локальные .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>

+0

что вы пытаетесь достичь? – RizkiDPrast

ответ

0

ПРИМЕЧАНИЕ: Я немного запуталось, что вы пытаетесь сделать, но ваш код даже не работает так что позволяет начать оттуда.

Вы можете сделать это без каких-либо 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">

Смежные вопросы