ajacksified · October 5, 2012 23:23
diff --git a/brent-beerify.html b/brent-beerify.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Drag and Drop Example</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

    <style>
      #container {
        height: 400px;
        width: 700px;
        border: solid 1px #ccc;
        position: relative;
      }

      #picture {
        margin: 5px;
        background: #ccc;
        height: 390px;
        width: 390px;
      }

      .mustache {
        height: 15px;
        width: 100px;
        background: #000;
        position: absolute;
        right: 0;
      }

      .mustache-1 {
        top: 0;
      }

      .mustache-2 {
        top: 30px;
        background: #f0f;
      }

      .mustache-3 {
        top: 60px;
        background: #ff0;
      }

      .mustache-4 {
        top: 90px;
        background: #00f;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="picture"></div>
      <div class="mustache mustache-1 cloneable" data-type="1"></div>
      <div class="mustache mustache-2 cloneable" data-type="2"></div>
      <div class="mustache mustache-3 cloneable" data-type="3"></div>
      <div class="mustache mustache-4 cloneable" data-type="4"></div>
    </div>

    <form action="#" method="POST" id="coordinates">
      <button type="submit">MUSTACHIFY THX</button>
    </form>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

    <script>
      $(function(){
        $(".cloneable").bind("mouseover", function(e){
          e.preventDefault();

          var $clone = $(this).clone(),
              $form = $("#coordinates"),
              $thingLeft = $('<input type="hidden" name="thingleft[]" />'),
              $thingTop = $('<input type="hidden" name="thingtop[]" />'),
              $thingType = $('<input type="hidden" name="thingtype[]" />');

          $("#container").append($clone);

          $form.append($thingLeft);
          $form.append($thingTop);
          $form.append($thingType);

          $clone.draggable({
            containment: $("#container"),
            stop: function(e, ui) {
              var $mustache = $(this),
                  mustacheCoordinates = $mustache.offset(),
                  parentCoordinates = $("#picture").offset();

              $thingLeft.val(mustacheCoordinates.left - parentCoordinates.left);
              $thingTop.val(mustacheCoordinates.top - parentCoordinates.top);
              $thingType.val($mustache.data("type"));
            }
          });
        });
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Drag and Drop Example</title>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

	<style>
	#container {
	height: 400px;
	width: 700px;
	border: solid 1px #ccc;
	position: relative;
	}

	#picture {
	margin: 5px;
	background: #ccc;
	height: 390px;
	width: 390px;
	}

	.mustache {
	height: 15px;
	width: 100px;
	background: #000;
	position: absolute;
	right: 0;
	}

	.mustache-1 {
	top: 0;
	}

	.mustache-2 {
	top: 30px;
	background: #f0f;
	}

	.mustache-3 {
	top: 60px;
	background: #ff0;
	}

	.mustache-4 {
	top: 90px;
	background: #00f;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<div id="picture"></div>
	<div class="mustache mustache-1 cloneable" data-type="1"></div>
	<div class="mustache mustache-2 cloneable" data-type="2"></div>
	<div class="mustache mustache-3 cloneable" data-type="3"></div>
	<div class="mustache mustache-4 cloneable" data-type="4"></div>
	</div>

	<form action="#" method="POST" id="coordinates">
	<button type="submit">MUSTACHIFY THX</button>
	</form>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

	<script>
	$(function(){
	$(".cloneable").bind("mouseover", function(e){
	e.preventDefault();

	var $clone = $(this).clone(),
	$form = $("#coordinates"),
	$thingLeft = $('<input type="hidden" name="thingleft[]" />'),
	$thingTop = $('<input type="hidden" name="thingtop[]" />'),
	$thingType = $('<input type="hidden" name="thingtype[]" />');

	$("#container").append($clone);

	$form.append($thingLeft);
	$form.append($thingTop);
	$form.append($thingType);

	$clone.draggable({
	containment: $("#container"),
	stop: function(e, ui) {
	var $mustache = $(this),
	mustacheCoordinates = $mustache.offset(),
	parentCoordinates = $("#picture").offset();

	$thingLeft.val(mustacheCoordinates.left - parentCoordinates.left);
	$thingTop.val(mustacheCoordinates.top - parentCoordinates.top);
	$thingType.val($mustache.data("type"));
	}
	});
	});
	});
	</script>
	</body>
	</html>