CSSで作図された図をマウスのdrag&dropで動かす

メモ

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script language="JavaScript">
$(function(){
  $('#draggable_battery').draggable({
    stop: function(){
            var ofs = $('#draggable_battery').offset();
            alert("X=" + ofs.left + ": Y=" + ofs.top);
          }
  });
});
</script>

<style type="text/css">

.battery {
    border: 8px solid black;
    width: 50px;
    height: 30px;
    position: relative;
    cursor:pointer;
    z-index:200;
}

.battery:before {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 20px;
    top: 3px;
    left: 2px;
    background: black;
    box-shadow: 
       0 4px,
       13px 0,
       13px 4px,
       26px 0,
       26px 4px,
       56px 3px;
}
</style>
</head>
<body>
<div id="draggable_battery" class="battery" ></div>
</body></html>

<html>

<head>

$(function(){

$('#draggable_battery').draggable({

stop: function(){

var ofs = $('#draggable_battery').offset();

alert("X=" + ofs.left + ": Y=" + ofs.top);

}

});

</script>

.battery {

border: 8px solid black;

width: 50px;

height: 30px;

position: relative;

cursor:pointer;

z-index:200;

}

.battery:before {

content: "";

display: block;

position: absolute;

width: 10px;

height: 20px;

top: 3px;

left: 2px;

background: black;

box-shadow:

0 4px,

13px 0,

13px 4px,

26px 0,

26px 4px,

56px 3px;

}

</style>

</head>

<body>

</body></html>

<html>
<head>
<link rel="stylesheet" href="./icono.min.css"/>
<style type="text/css">
.allow:before {
  border-bottom: 3px solid #557777;
  border-right : 3px solid transparent;
  display      : block;
  height       : 0;
  position     : absolute;
  right        : -3px;
  top          : 0;
  width        : 0;
}
</style>
<script src="./jquery.min.js"></script>
<script src="./jquery-ui.min.js"></script>
<script language="Javascript">
$(function(){
  var hosts = [
   "L2SW11",
   "L2SW12",
   "L2SW13",
   "L2SW14",
   "L2SW15",
   "L2SW16",
   "L2SW17",
   "L2SW18",
   "L2SW19",
   "L2SW1a",
   "L2SW1b"
  ];
  for(var i=0; i<hosts .length; i++){
    var id = "#" + hosts[i];
    $(id).draggable({
      stop: function(){
              var ofs = $(id).offset();
              alert("ID=" + this.id + " : X=" + ofs.left + " : Y=" + ofs.top);
            }
    });
  }
});
</script>
</hosts></script></head>

<body>
<div class="allow"></div>
<br />
<br />
<br />
<i id="L2SW11" class="icono-mail"></i>
<i id="L2SW12" class="icono-share"></i>
<i id="L2SW13" class="icono-barChart"></i>
<i id="L2SW14" class="icono-barChart"></i>
<i id="L2SW15" class="icono-exclamation"></i>
<i id="L2SW16" class="icono-home"></i>
<i id="L2SW17" class="icono-mail"></i>
<i id="L2SW18" class="icono-mail"></i>
<i id="L2SW19" class="icono-mail"></i>
<i id="L2SW1a" class="icono-mail"></i>
<i id="L2SW1b" class="icono-mail">L2SW1b</i>
</body>
</html>

<html>

<head>

.allow:before {

border-bottom: 3px solid #557777;

border-right : 3px solid transparent;

display : block;

height : 0;

position : absolute;

right : -3px;

top : 0;

width : 0;

}

</style>

$(function(){

var hosts = [

"L2SW11",

"L2SW12",

"L2SW13",

"L2SW14",

"L2SW15",

"L2SW16",

"L2SW17",

"L2SW18",

"L2SW19",

"L2SW1a",

"L2SW1b"

];

for(var i=0; i<hosts .length; i++){

var id = "#" + hosts[i];

$(id).draggable({

stop: function(){

var ofs = $(id).offset();

alert("ID=" + this.id + " : X=" + ofs.left + " : Y=" + ofs.top);

}

});

}

});

</script>

</hosts></script></head>

<body>

<br />

</body>

</html>