2017-04-26 12 views
0
<!DOCTYPE html> 
<html> 
<head> 
    <title>songs list</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <style type="text/css"> 
.droppable { 
    width: 300; 
    height: 900px; 
    background: lightgrey; 

} 
    </style> 
</head> 
<body> 
<div class="draggable"> 
    <p><a href="C:\Users\DELL\Desktop\drag and drop\static\Allah Duhai Hai.mp3"><EM> barish</EM></p> 
</div> 
<div class="draggable"> 
    <p><a href="C:\Users\DELL\Desktop\drag and drop\static\Aa Bhi Ja Mere Mehermaan.mp3"><EM> Aa Bhi Ja Mere Mehermaan</EM></a></p> 
</div> 
    <div class="draggable"> 
<p><a href="C:\Users\DELL\Desktop\drag and drop\static\Aa Bhi Ja Sanam.mp3"><EM>Aa Bhi Ja Sanam</EM></a></p> 
    </div> 
    <div class="draggable"> 
<p><a href="C:\Users\DELL\Desktop\drag and drop\static\Allah Duhai Hai.mp3"><EM>Allah Duhai Hai </EM></a></p> 
    </div> 

<div class="droppable"> 

</div> 


<script type="text/javascript"> 
$('.draggable').draggable({ 
    revert: "invalid", 
    stack: ".draggable", 
    helper: 'clone' 
}); 
$('.droppable').droppable({ 
    accept: ".draggable", 
    drop: function (event, ui) { 
     var droppable = $(this); 
     var draggable = ui.draggable; 
     // Move draggable into droppable 
     draggable.clone().appendTo(droppable); 
    } 
}); 
</script> 
</body> 
</html 

#ドラッグアンドドロップドロップのオーディオファイル用のスクリプトがありますが、同じオーディオをdivに再度アップロードすると、そのdivに再び移動します。つまり、追加する必要はありませんファイルが1回追加された場合(つまり、ドラッグ&ドロップ)ファイルをdivに繰り返しドラッグアンドドロップする方法は?

答えて

0

スクリプトを完了した後、あなたは(https://api.jquery.com/removeclass/.removeClass()メソッドを使用してDIVからこのような

何かクラスを削除できます。

<script type="text/javascript"> 
$('.draggable').draggable({ 
    revert: "invalid", 
    stack: ".draggable", 
    helper: 'clone' 
}); 
$('.droppable').droppable({ 
    accept: ".draggable", 
    drop: function (event, ui) { 
     var droppable = $(this); 
     var draggable = ui.draggable; 
     // Move draggable into droppable 
     draggable.clone().appendTo(droppable); 
     $(this).removeClass('droppable'); 
    } 
}); 
</script> 
関連する問題