2011-12-28 15 views
1

私はちょうどJavascriptを学び始めており、jquery draggableを使ってドラッグアンドドロップを作成しました。私の最初のドラッグアンドドロップは動作しますが、それはベストプラクティスですか?

デモはここにある:

http://www.vwardv.com/doll6.html

私はjqueryのサイトに行って、デモを適応して遊んので、私はチュートリアルを見つけることができませんでした。それは動作しますが、私はそれが実際にコード化されるべき方法でコード化したかどうかわかりません。あなたが改善するものがあれば教えていただけたら本当に感謝しています。ここで

はコードです:

<!doctype html> 
<html lang="en"> 
<head> 


<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> 


<script> 
$(function() { 
    $("#draggable").draggable() 
}); 
</script> 

<script> 
$(function() { 
    $("#draggable2").draggable(); 
}); 
</script> 

<script> 
$(function() { 
    $("#draggable3").draggable(); 
}); 
</script> 

<script> 
$(function() { 
    $("#draggable4").draggable(); 
}); 
</script> 

<script> 
$(function() { 
    $("#draggable5").draggable(); 
}); 
</script> 


</head> 
</body> 

<div id="bodies/palepd.gif"> 
<img src="bodies/palepd.gif" class="ui-widget-content" id="draggable"> 
<img src="bodies/trousers.gif" class="ui-widget-content" id="draggable2"> 
<img src="bodies/top.gif" class="ui-widget-content" id="draggable3"> 
<img src="bodies/dress.gif" class="ui-widget-content" id="draggable4"> 
<img src="bodies/coat.gif" class="ui-widget-content" id="draggable5"> 
</div> 

ヴィック

更新*

ありがとう、私は本当に感謝し、すべてのあなたのアドバイスをいただき、ありがとうございます。私は今あなたの助言に従ってコードを調整しました。私が何かを誤解したか、それ以上改善できるものがあれば教えてください。あなた

<!doctype html> 
<html lang="en"> 
<head> 


<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> 


<script> 
$(document).ready(function() { 
    $(".mydraggable").draggable(); 
}); 
</script> 


</head> 
<body> 

<div id="items"> 
<img src="bodies/palepd.gif" class="mydraggable"> 
<img src="bodies/trousers.gif" class="mydraggable"> 
<img src="bodies/top.gif" class="mydraggable"> 
<img src="bodies/dress.gif" class="mydraggable"> 
<img src="bodies/coat.gif" class="mydraggable"> 
</div> 


</body> 

* 更新2

誰も私を伝えることができ、なぜ私たちべき 'UI-ウィジェットコンテンツ' の代わりの 'my​​draggble' ありがとうございましたか!

は、今私は、たとえば、あなたはジャケットの後ろにトップを置くことができるようにアイテムを注文された次の段階、に移動する必要があるなど

私はページへの2つのボタンを追加する必要があります:1アイテムをレイヤー/レイヤーの上に移動し、レイヤー/レイヤーを下に移動します。これは明らかに、明確にするために、どの項目が選択されたかを示す手段を構築する必要があることを意味します。誰も私にこれらのことのどちらか/どちらかの正しい方向に向けることができますか?

おかげで再び

+2

最大の問題は、彼女のパンツが全く合わないことが確かです。間違いなく最大;) – Interrobang

答えて

0

は1で、これらの5つの別々のスクリプトブロックを交換する方が良いでしょう:さらに良い

<script> 
$(document).ready(function() { 
    $("#draggable, #draggable2, #draggable3, #draggable4, #draggable5").draggable() 
}); 
</script> 

があなたのページとその上のすべてのドラッグ可能な要素にクラスのmydraggable」を与えることであろうで上記を置き換える:

<script> 
    $(document).ready(function() { 
     $(".mydraggable").draggable() 
    }); 
</script> 
+0

ありがとう!それはまさに私が知りたかったものです。私はそのようなものがなければならないと思った。コードとその動作を変更しました。これはあなたが意図したものです: – vward

1

私は、あなたは、単に1つのjQueryのセレクタ内のすべてのオブジェクトを呼び出すことができると思う:

$('.ui-widget-content').draggable(); 
0

たいてい罰金:)

</body>最後にそれと</html>を閉じ<body>こととすべきです。

<div id="bodies/palepd.gif"> 

これは無効なIDです。

単一のブロックにすべてのあなたのインラインスクリプトブロックを組み合わせる:私に出て飛躍

$(function() { 
    $("#draggable1, #draggable2, #draggable3, #draggable4, #draggable5").draggable(); 
}); 
0

最初の事はあなたが持っているreadyイベントハンドラの数です。 $(function() { ...の各インスタンスは、DOMが操作可能な状態で実行される準備完了イベントハンドラです。

1で十分だろうというとき非常に多くを持っている必要はありません。

$(function() { 
    $("#draggable").draggable() 
    $("#draggable2").draggable(); 
    $("#draggable3").draggable(); 
    $("#draggable4").draggable(); 
}); 

次の問題は、関数本体の最初の行に不足しているセミコロンです。それは大きな問題ではありませんが、私はいつもセミコロンを行末に含めておくことをお勧めします。後で混乱する問題に遭遇する可能性があります。

次に、これらの4行を1行に置き換えることができます。すべての4つの要素が共通のクラスを共有するとして、あなたはそれらのすべてに一致するクラスセレクタを使用することができます。

$(function() { 
    $(".ui-widget-content").draggable(); 
}); 

また、あなたが<body>要素を開くことはありません、それだけを閉じます。 </body><body>に変更し、最後に閉じます。

最後に、<script>要素に存在する属性がない場合は、type属性が存在する必要があります。その<script>要素内にJavaScriptコードを記述する場合、typetext/javascriptが必要です。その他のHTML有効性の問題は、要素の<title>要素がなく、alt属性がないことです。

は、したがって、すべてのすべてで、私はこのようにコードを変更します

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Some title</title> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(".ui-widget-content").draggable(); 
     }); 
    </script> 
</head> 
<body> 
    <div id="bodies/palepd.gif"> 
     <img src="bodies/palepd.gif" class="ui-widget-content"> 
     <img src="bodies/trousers.gif" class="ui-widget-content"> 
     <img src="bodies/top.gif" class="ui-widget-content"> 
     <img src="bodies/dress.gif" class="ui-widget-content"> 
     <img src="bodies/coat.gif" class="ui-widget-content"> 
    </div> 
</body> 
</html> 
+0

'type'属性について:私はあなたがそれをどのような場合にも含める必要はないと思います。 [specification](http://www.w3.org/TR/html5/scripting-1.html#the-script-element)は次のように述べています:* "デフォルトは属性がない場合に使用され、 text/javascript "' "*これは' src'属性とは無関係です。 –

+0

はい、あなたは正しいです。以下の仕様書の行はそれをさらに明確にしています。*言語が "text/javascript"で記述されていない場合は、type属性が存在しなければなりません。毎日何か新しいことを学ぶ:) –

+0

ありがとうございました。とても助かりました。本当に感謝しています。 – vward

関連する問題