0290_jquery_ui_droppable_for_shopping_cart.html

<!-- ドラッグ＆ドロップで購入するショッピングカートを作るには？ -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="assets/jquery.ui/themes/redmond/jquery-ui-1.8.16.custom.css" media="screen" rel="Stylesheet" type="text/css" />
    <style type="text/css">
      #basket {width: 128px; height: 128px; border: 1px solid black;}
    </style>
    <script src="assets/jquery.js" type="text/javascript"></script>
    <script src="assets/jquery.ui/ui/jquery-ui-1.8.16.custom.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function(){
        $("#apple").draggable();
        $("#basket").droppable({
          drop: function(){$(this).text("購入しました")},
        });
      });
    </script>
  </head>
  <body>
    <span id="apple">りんご</span>
    <div id="basket">カゴ</div>
  </body>
</html>