外贸网站建设基础国家和城乡建设部网站
Drop-able 功能可与JqueryUI中的交互一起使用。此功能可在任何DOM元素上启用可放置功能。
Drop able - 语法
$( "#droppable" ).droppable();
Drop able - 示例
以下是一个简单的示例，显示了drop-able的用法-
<html><head><title>The jQuery Example</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script><script type="text/javascript" language="javascript">$(function() {$( "#draggable" ).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; }</style></head><body><div id="draggable" class="ui-widget-content"><p>Drag</p></div><div id="droppable" class="ui-widget-header"><p style="background-color: aquamarine;height: 50;">Drop here</p></div></body> </html>
这将产生以下输出-
jQuery 中的 Dropable移动函数 - 无涯教程网无涯教程网提供Drop-able 功能可与JqueryUI中的交互一起使用。此功能可在任何DOM元素上启用可放置功...
https://www.learnfk.com/jquery/interactions-dropable.html