1

我是jquery的新手。我在以下代码中有问题。我将其保存为 html 文件，但Draggable 框在浏览器中不可见。我想安装“ UI Draggable 插件”哪里出错了... . 

<style type="text/css">
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
    </style>
    <script type="text/javascript">
    $(function() {
        $( "#draggable" ).draggable();
    });
    </script>
</head>



<div class="demo">

<div id="draggable" class="ui-widget-content">
    <p>Drag me and</p>
</div>

</div>
4

4 回答 4

2

演示 http://jsfiddle.net/QhVNr/

$(".draggable").draggable({
    axis: "y",
    containment: 'parent'
});
于 2012-07-04T12:26:23.003 回答
0

您没有在页面中包含 jquery UI 脚本文件，否则它可以正常工作，请参阅它在这里工作

于 2012-07-04T12:16:06.543 回答
0

它应该是

<script type="text/javascript">
    $(document).ready(function() {
        $( "#draggable" ).draggable();
    });
</script>
于 2012-07-04T12:16:49.357 回答
0

对于拖放，您必须执行以下步骤：

1) 包括最新的 JQuery 和 JQuery UI javascript 文件以及包括 JQuery UI CSS

2）编写HTML：

<div id="demo-frame">
    <div class="demo">
        <div id="draggable" class="ui-widget-content ui-draggable">
            <p>Drag me to my target</p>
        </div>
        <div id="droppable" class="ui-widget-header ui-droppable">
            <p>Drop here</p>
        </div>
   </div>
 </div>

3）应用CSS：

#demo-frame {
    border: 1px solid #DDDDDD;
    clear: right;
    height: 300px;
    overflow: auto;
    position: relative;
    width: 520px;
}
#demo-frame .demo {
    padding: 5px;
}

#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; 
}
.ui-widget-content {
    background: url("http://jqueryui.com/themeroller/images/?new=eeeeee&w=1&h=100&f=png&q=100&fltr[]=over|textures/03_highlight_soft.png|0|0|100") repeat-x scroll 50% top #EEEEEE;
    border: 1px solid #DDDDDD;
    color: #333333;
}

4）编写jQuery脚本：

$(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                        .html( "Dropped!" );
            }
        });
    });

我在http://codebins.com/codes/home/4ldqpdd上创建了用于拖放的垃圾箱

于 2012-07-04T14:36:49.667 回答