jQuery UI 中的基本拖放方法答案

【问题标题】：Basic drag and drop method in jQuery UI [closed]jQuery UI 中的基本拖放方法
【发布时间】：2012-07-10 02:39:15
【问题描述】：

这里有没有人有关于在 jQuery UI 中拖放元素的基本教程，比如图像、文本等。非常感谢你的帮助，我真的需要它。

【问题讨论】：

标签： jquery html css jquery-ui jquery-ui-draggable

【解决方案1】：

把自己打晕：

http://www.ericbieller.com/2010/06/24/how-to-create-a-simple-drag-and-drop-with-jquery/

【讨论】：

@FrancisCebu：这不是在 stackoverflow 站点中表示感谢的方式。如果答案有帮助，请点击upvote，如果答案最好，请点击右标记接受答案meta.stackexchange.com/questions/5234/…

【解决方案2】：

您可以浏览以下示例。它包含 25 种方法。

http://www.tripwiremagazine.com/2012/04/jquery-drag-drop-plugins.html

【讨论】：

【解决方案3】：

由于您已经在使用 jQuery，您可以考虑使用 jQuery UI 库。实现起来很简单

<div class="demo">      
  <div id="draggable" class="ui-widget-content">
     <p>Drag me to my target</p>
  </div>
  <div id="droppable" class="ui-widget-header">
     <p>Drop here</p>
  </div>    
</div>
 <script>
$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});
</script>

【讨论】：