Question

<!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

#i有拖放音频文件的脚本它工作正常，但如果我再次将相同的音频上传到div中，再次进入该div，我的意思是我不想添加文件，如果它被添加一次（即）拖放。

Answer 1

使用.removeClass()方法（https://api.jquery.com/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>

如何将文件拖放到div而不重复？

1 个答案: