Question

我正在构建一个WebApp，其中包含要拖动的项目。

到位后，我想转到下一页。

如何说“如果项目在坐标中，请转到page2.html”否则什么都不做？

这是一个WebApp，所以HTML，HTML5，jQuery，javascript ......触摸功能是必须的......没有原生的iOS / Android / Windows代码。

Answer 1

使捕获位置可放置，然后在放下时执行功能。

 $( "#droppable" ).droppable({
     drop: function( event, ui ) {
         // do something here
     }
 });

这是一个应该是自我解释的快速，希望！

<style>
.box1, .box2, .box3 { 
width:150px;
height:150px;
margin:30px;
background-color:#ccc;
padding:12px;
text-align:center;
}

.box2, .box3 {
height: 100px;
width: 100px; 
background-color: #f1f1f1;
border: 1px solid green;
cursor: pointer
}
</style>

<script>
$(function() {
    $( ".draggable" ).draggable({
        revert: "invalid"
    });
    $( ".droppable" ).droppable({
        drop: function( event, ui ) {
            var thisState = $(this).attr('oneDrop');
            if(thisState==='true'){
                alert('dragged and dropped now closed');
                $(this).droppable('destroy').html('closed now').css('background-color','red');
            }

        }
    });
});
</script>
<body>
<div class="droppable box1" onedrop="true">Box 1 - Drop in here</div>
<div class="box2 draggable">Box 2 - Drag me and drop me in Box 1</div>
<div class="box3 draggable">Box 3 - Drag me and try drop me in Box 1 after you've dragged Box 2 in there</div>
</body>

将方框2拖到方框1中，然后方框1停止变为可放置。因此，您现在不能将框3放入框1，因为它基本上已关闭。

希望这有帮助。

Here's a fiddle to show what I mean

如何为拖放项目进行事件处理？

1 个答案: