2015-12-29 71 views
1

我試圖讓一個div可拖動。 div包含一個img和一些用作圖像標籤的文本。問題是,當我通過單擊img開始拖動時,img被拖動,而不是整個div。我如何解決這個問題?做一個div,包含一個img可拖動

<div className="container-selected" id={id} 
    draggable="true" onDragStart={this.dragStart} onDragEnd={this.drop} onClick={this.click}> 
    <img src={status} /> 
    <span className="beacon-id">Some text</span> 
</div> 

這裏的風格:

.container-selected { 
    padding: 10px; 
    position: relative; 
    z-index: 0; 

    img { 
    width: 3em; 
    z-index: -1; 
    } 

    .beacon-id { 
    position: absolute; 
    left: 0; 
    top: 53px; 
    width: 100%; 
    text-align: center; 
    } 
} 

回答

1

您可以使用HTML5的拖放這樣的:https://jsfiddle.net/bv5fLrth/23/

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<div id="drag1" draggable="true" ondragstart="drag(event)"> 

<img id="drag1" src="http://lorempixel.com/400/200/" /> 
</div> 
<script> 
    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"); 
    ev.target.appendChild(document.getElementById(data)); 
    } 

</script> 
+0

OK,這基本上我在做什麼,但你指定同一個ID到div和img。這幾乎完成了這項工作。唯一的問題是,拖動的對象看起來不同,具體取決於拖動圖像還是標籤,但這確實很小。感謝Adam! –

+0

@DmitryShvedov我相信有一個更好的方法來解決這個問題,希望別人也能用一個更好的主意來回答這個問題。 –