MAYAKOです。
teratailユーザーの皆様、いつもお世話になっております。
今日はjQueryUIの「droppable」を勉強していて、詰まってしまったので、質問させていただきます。
表題の通り、droppableにhoverClassとtoleranceのオプションをつけたのですが、それがうまく動作してくれません。
何度コードを確認しても特に間違ってないようなので、なぜ動作しないのかわかりません。
その他のdragやcloneのイベントなどは動作するようです。
コードは下記のような感じです。
lang
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>droppbaleの練習</title> 6 <link rel="stylesheet" href="jQuery-ui.css"> 7 <script src="external/jquery/jquery.js"></script> 8 <script src="jquery-ui.min.js"></script> 9<style> 10 11 #drop { 12 width:200px; 13 height:200px; 14 background: yellow; 15 text-align:center; 16 color:brown; 17 font-weight:bold; 18 float:left; 19 margin-bottom:50px; 20 } 21 22 .box { 23 width:50px; 24 height:50px; 25 background: orange; 26 text-align:center; 27 color:black; 28 font-weight:bold; 29 float:left; 30 } 31 32 .hover { 33 background: blue; 34 } 35 36</style> 37</head> 38<body> 39<div class="box">box</div> 40<div id="drop">drop here!</div> 41 42<script> 43 $(function(){ 44 $('.box').draggable({ 45 helper: 'clone' 46 }); 47 $('#drop').droppable({ 48 accept: '.box', 49 hoverClass: 'hover', 50 tolerance: 'fit', 51 drop: function(event, ui){ 52 ui.draggable.clone().appendTo(this); 53 console.log('Dropped!'); 54 } 55 }); 56 }); 57</script> 58</body> 59</html>
もし、ここが違うじゃないか!という部分がありましたら、ご指摘いただけると助かります。
どうぞご回答よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/09 07:51