0

ボタンのクリックで div にドロップされた画像を確認しようとしています。console.log がありますが、ドロップするかどうかに関係なく、false が表示され続けます。誰かがここで私を助けることができますか....

<!DOCTYPE HTML>
<html>
<head>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
body{background-color: #505050; color: #FFFFFF;}
#wrap{width: 99%; margin: 45px auto; text-align: center;}
#div1 {width: 440px;height: 65x;padding:10px;border:3px solid #aaaaaa; margin: 20px auto 20px auto; text-align: left;}
#div2 {width:440px;height:440px; border: solid 1px; border-radius: 220px; -webkit-border-radius: 250px; -moz-border-radius: 25opx; margin: 20px auto 20px auto; text-align: center;}

</style>
  <script>
  var drag1 = false;
  var drag2 = false;
  var drag3 = false;

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

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

      }

    });
  });
  </script>
</head>
<body>
<div id="wrap">

   <!--<h3>Drag icons(represent tables) into the circle(represents the entire database)</h3>-->
   <div id = "div1" class="ui-widget-header">
   <img id="draggable1" src="images/linux.png" class="ui-widget-content" style="border: solid 1px; border-radius: 32px;">&nbsp
   <img id="draggable2" src="images/windows.png" class="ui-widget-content" style="border: solid 1px; border-radius: 32px">&nbsp
   <img id="draggable3" src="images/apple.png" class="ui-widget-content"  style="border: solid 1px; border-radius: 32px">
   </div>
<div id="div2" class="ui-widget-header"></div>
<input type="button" value="run" onclick="getDivValues()"/>
</div>

  <script>
  function getDivValues(){
    if($("#div2").find("#draggable1")){
        drag1 = true;
        console.log("drag1: " + drag1);
    }
    else if(!$("div2").find("#draggable1")){
        drag1 = false;
        console.log("drag1: " + drag1);
    }
  }
  </script>
</body>
</html>
4

0 に答える 0