Question

我在HTML中有一个拖放功能。

我也做了一个画布。

我将HTML5的代码拖放到画布所在的代码中。但是图像不会出现在画布上。

有谁可以告诉我应该替换什么，以便它在画布上正确显示？

我尝试更改功能位置图和地点的ID以匹配画布的ID，但这不起作用...

由于

<h2>Place your hero on the map</h2>


<canvas width=1200 height=350 id='map_id'>
</canvas>

<script>

// setup
var canvas = document.getElementById('map_id');
var context = canvas.getContext('2d');

var hmap = Math.min(0.9 * screen.height, 0.45 * screen.width);
var numHeroes = 101;
var rows = Math.ceil(Math.sqrt(numHeroes))+5;
var hsize = Math.floor((1.0 / rows) * hmap);

function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    document.getElementById(data).style.left = ev.clientX + document.body.scrollLeft - 0.5 * parseInt(document.getElementById(data).style.height) + "px";
    document.getElementById(data).style.top = ev.clientY + document.body.scrollTop - 0.5 * parseInt(document.getElementById(data).style.height) + "px";
}

function placeMap()
{
    var map = document.getElementById("map");
    map.style.left = "0px";
    map.style.top = "0px";
    map.style.height = hmap + "px";
    map.style.width = hmap + "px";
}

function placeBack()
{
    var map = document.getElementById("back");
    map.style.left = hmap + "px";
    map.style.top = "0px";
    map.style.height = hmap + "px";
    map.style.width = hmap + "px";
}

function place(id, num)
{
    var img = document.getElementById(id);
    img.style.left = hmap + hsize * (num % rows) + "px";
    img.style.top = hsize * Math.floor(num / rows) + "px";
    img.style.height = hsize + "px";
    img.style.width = hsize + "px";
}

function placeWard(id, num)
{
    var img = document.getElementById(id);
    img.style.left = hmap + (1+(num % 2)) * 0.5 * hsize + "px";
    img.style.top = 7.5 * hsize + Math.floor(num / 2) * 0.5 * hsize + "px";
    img.style.height = 0.5*hsize + "px";
    img.style.width = 0.5*hsize + "px";
}

</script>


<!-- draw a horizontal line -->

<hr>

</body>
</html>

Answer 1

您是否愿意使用jQueryUI draggable而不是html ondrag？

如果是，这里是示例代码和演示：http://jsfiddle.net/m1erickson/s4GUS/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var image1=new Image();
    image1.onload=function(){
    }
    image1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";

    var $house=$("#house");
    var $canvas=$("#canvas");

    $house.draggable({
        helper:'clone',
        // event handlers
        start:dragstart,
        drag:dragmove,
        stop:dragend,
    });
    // set the data payload
    $house.data("image",image1); // key-value pair

    $canvas.droppable({
        drop:dragDrop,
    });

    function dragstart(e){

// console.log（＆＃34; dragstart＆＃34;）; }

    function dragmove(e){

// console.log（＆＃34; dragmove：＆＃34; + e.clientX +＆＃34; /＆＃34; + e.clientY）; }

    function dragend(e,ui){
      // relative to document
      var dragX=ui.offset.left;
      var dragY=ui.offset.top;
      // top-left of dropped element is at canvasXY
      var canvasX=dragX-offsetX;
      var canvasY=dragY-offsetY
    }

    function dragDrop(e,ui){
        var element=ui.draggable;
        var data=element.data("url");
        var x=parseInt(ui.offset.left-offsetX);
        var y=parseInt(ui.offset.top-offsetY);
        ctx.drawImage(element.data("image"),x-1,y);            
    }

}); // end $(function(){});
</script>

</head>

<body>
    <img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png"><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

在画布上放置元素

1 个答案: