我有一个脚本,允许将图像拖放到特定位置。但我想让它能够在屏幕上拖放。不仅仅是div所在的位置。我该怎么做呢?我需要创建很多div还是什么?
我的脚本:
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));
}
我的风格,
#div1
{
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
我的HTML:
<a href="#" id="suspect">
<div class="image">
<img id="drag1" src="images/suspect.png" width="160" height="140" alt="" draggable="true" ondragstart="drag(event)"/>
</div>
</a>
我解决了。你可以在这里查看:
SCRIPT:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable3" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
} );
</script>
风格<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
HTML <a href="#" id="suspect">
<div id="draggable3" class="image">
<img src="images/suspect.png" width="160" height="140" alt=""/>
</div>
</a>