1

私はjqueryを初めて使用します.次のコードに問題があります.htmlファイルとして保存しましたが、ブラウザにドラッグ可能ボックスが表示されません.「 UIドラッグ可能プラグイン」をインストールしますか? . 

<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

ドラッグアンドドロップの場合は、次の手順に従う必要があります。

1）最新のJQueryおよびJQuery UI javascriptファイルを含めるだけでなく、JQueryUICSSも含める

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 に答える
0

ページにjqueryUIスクリプトファイルを含めていない場合は、正常に機能しています。ここで機能していることを確認してください。

于 2012-07-04T12:16:06.543 に答える
0

そのはず

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