Skip to content

Instantly share code, notes, and snippets.

@tily

tily/memo.md

Created April 22, 2012 22:43
Show Gist options
  • Save tily/2467365 to your computer and use it in GitHub Desktop.
Save tily/2467365 to your computer and use it in GitHub Desktop.
Download ZIP
jsPlumb 動作確認 (要素 A からネストされた要素 B へ接続しても接続関係が維持されたままドラッグできる)
Raw
memo.md
Raw
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script type="text/javascript"
src="https://raw.github.com/sporritt/jsPlumb/master/build/1.3.8/js/jquery.jsPlumb-1.3.8-all-min.js"></script>
<script type="text/javascript">
jsPlumb.ready(function() {
document.onselectstart = function() { return false; }
jsPlumb.Defaults.Container = $("body");
jsPlumb.addEndpoint("container1", {isSource:true, isTarget:true});
jsPlumb.addEndpoint("child1", {isSource:true, isTarget:true});
jsPlumb.addEndpoint("child2", {isSource:true, isTarget:true});
jsPlumb.draggable($("#container1"), {scope:"scope"});
jsPlumb.draggable($("#container2"), {scope:"scope"});
$(".container").droppable({scope:"scope"});
});
</script>
<style>
div#stage {
background-color: #ccc;
width: 800px;
height: 800px;
}
div.container {
position: absolute;
margin: 1.0em;
width: 100px;
height: 100px;
background-color: #999;
color: white;
}
div.child {
}
</style>
</head>
<body>
<div id="stage">
<div class="container" id="container1">
hello1
</div>
<div class="container" id="container2">
<div class="child" id="child1">hello2</div>
<div class="child" id="child2">hello3</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment