Hallo,
ich habe ein Javascript geschrieben in welchem ich Draggable Objekte defintiert hab und ein Droppable (canvas) auf das die Draggable gemalt werden sollen.
Beim Droppen soll das Element das "gedraggt" wurde genauso gedroppt werden wie es auf das Canvas gezogen wurde.
Ich habe das versucht mit .positionedOffset(); zu realisieren aber das führt nur dazu dass das Element unter dem Mauszeiger "irgenwo" abgelegt wird.
Abe wie bekomm ich es hin dass das Draggable von der mitte an dorthin gemalt wird wo der mauszeiger is?
Mein Code :
Ich nutze Scriptacioulous und Prototype
ich habe ein Javascript geschrieben in welchem ich Draggable Objekte defintiert hab und ein Droppable (canvas) auf das die Draggable gemalt werden sollen.
Beim Droppen soll das Element das "gedraggt" wurde genauso gedroppt werden wie es auf das Canvas gezogen wurde.
Ich habe das versucht mit .positionedOffset(); zu realisieren aber das führt nur dazu dass das Element unter dem Mauszeiger "irgenwo" abgelegt wird.
Abe wie bekomm ich es hin dass das Draggable von der mitte an dorthin gemalt wird wo der mauszeiger is?
Mein Code :
Java:
<div id="toolbar">
<div id="tabmenu">
<div id="tab_datasheet1" class="tab active">Terrain</div>
<div id="tab_datasheet2" class="tab">Objects</div>
<div id="tab_datasheet3" class="tab">Nyan</div>
</div>
<div id="datasheet1" style="margin:5px"></div>
<div id="datasheet2" style="display:none"></div>
<div id="datasheet3" style="display:none">
</div>
</div>
</div>
<script type="text/javascript">
mapbackground.each(function(item){
var image = new Image();
image.src = './application/images/mapbackground/' + item;
$('datasheet1').insert({'bottom': image });
new Draggable(image, {revert: true});
});
mapobjects.each(function(item){
var image = new Image();
image.src = './application/images/mapobjects/' + item;
$('datasheet2').insert({'bottom': image });
new Draggable(image, {revert: true});
});
var image = new Image();
image.src = 'nyancat.gif';
$('datasheet3').insert({'bottom': image });
new Draggable(image, {revert: true});
Droppables.add('droppable', {
hoverclass: 'hover',
onDrop: function(dragged, dropped, event) {
$('droppable').highlight();
var arr = dragged.positionedOffset();
alert("offsetLeft : " + arr[0] );
alert("offsetTop : " + arr[1] );
var image = new Image();
ctx.drawImage(dragged, this,this);}
});
</script>Ich nutze Scriptacioulous und Prototype
