Question

我发现了一段时间的帖子对我正在做的事情非常有用。我需要在任何地方拖放一个对象（在我的情况下是一个图像）的功能，然后将其放在我想要的任何地方而不改变它周围的内容。

但是，我似乎无法使用简单的图像而不是代码块。我确定这很容易解决，我只是忽视了一些事情，但我很感激你的帮助。

这个例子与前面提到的SO帖子完美结合：http://jsfiddle.net/robertc/kKuqH/ （这是一个代码块，但我想要一个图像）

function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 
function drop(event) { 
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
} 
var dm = document.getElementById('dragme'); 
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false);

Answer 1

使图像成为div的背景图像。将您的CSS更改为以下内容：

aside { 
    position:  absolute;
    left: 0;
    top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
    width: 200px; 
    height: 200px;
    background: rgba(255,255,255,0.66); 
    border: 2px  solid rgba(0,0,0,0.5); 
    border-radius: 4px; padding: 8px;
    background-image: url('http://lorempixel.com/200/200/');
    background-repeat: no-repeat;
    background-position: center;
}

随处拖放图像

1 个答案: