0
オブジェクト（単純なイメージ）をツールボックスからキャンバスにドラッグしようとしています。しかし、キャンバスにドロップしたオブジェクトを移動/ドラッグすると、別のクローンを作成するように見えます。しかし、私が必要とするのは、オブジェクトをキャンバスに複数回ドロップするだけで、キャンバス内にオブジェクトをドラッグするたびにそのオブジェクトの複製を作成せずにキャンバス内のオブジェクトを移動することができるようにすることです。ここに私のコードは次のとおりです。jsPlumb-複製せずにクローンをドラッグ
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<!--script src="../dist/js/jsPlumb-2.1.1-min.js"></script-->
<style>
.ctoolbox{
position: absolute;
width: 72px;
height: 80px;
background-color: #0d78bc;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="ctoolbox" id="cId">
</div>
<div id="dropArea"></div>
<script>
//Drag and drop works for multiple objects but manipulating those objects within the canvas doesn't.
//Objects in the canvas are stagnant.
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".ctoolbox").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable
({
accept : '.ctoolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
$(droppedElement).draggable({containment: "dropArea"}); //Replicates everytime an object on the canvas is dragged.
droppedElement.appendTo('#dropArea');
droppedElement.click(divClicked);
}
});
function divClicked(clickedElement)
{
jsPlumb.draggable(clickedElement, {
containment : 'parent',
stop : function (event)
{
alert("divClicked Called!");
stateDragged=true;
clickedElement.css('background-color ','blue');
}
});
}
});
</script>
</body>
</html>