在另一個div內放置一個div點擊鼠標

使用按鈕單擊我可以生成可拖動的div，然後將其放置在另一個div（容器）內。從按鈕點擊創建的div自動放置在父容器div的左側。然後用戶可以將其拖動到所需的位置。有沒有辦法讓用戶生成新的div，然後讓他們用鼠標點擊確定這個新的div的位置？ JSFIDDLE 在另一個div內放置一個div點擊鼠標

由於用戶是搞清楚的位置和徘徊通過容器提供某種形式的臨時指導這樣的事情如下：

enter image description here

jQuery的

$('#button').click(function (e) { 
    $('<div />', { 
     'class': 'draggable ui-widget-content', 
     text: $('textarea').val(), 
     appendTo: '.middle-side', 
     draggable: { 
      containment: 'parent' 
     } 
    }); 
});

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea> 
<br/> 
<input type="button" id="button" value="Add Div with Text" /> 
<br/> 
<div> 
    <div class="middle-side"></div> 
</div>

來源

2014-08-27 Code_Ed_Student

如果我沒有誤解的問題，爲什麼不只是使股利（內）絕對並設置其座標位置的onclick父DIV的？它將設置內部div的座標幾乎是X == [currentMouseX - （divWidth/2），currentMouseY - （divHeight/2）] – Fer 2014-08-27 20:26:54

不確定我在追隨。可以證明，在Jsfiddle？ – 2014-08-27 20:28:28

我剛剛發佈了它，這兩個例子。我認爲第一個更直接相關，重新讀你的問題後，但你可以檢查他們兩個。祝你好運。 – Fer 2014-08-27 20:47:44

這就是我說的是：

兩個選項：

鼠標懸停舉動該div：

http://jsfiddle.net/Lqebpaov/

document.getElementById('parentDiv').addEventListener('mouseover', function(event) { 
    var child = document.getElementById('childDiv'); 
    var mouseX = event.clientX || event.pageX; 
    var mouseY = event.clientY || event.pageY; 
    var top = mouseY - 50; 
    var left = mouseX - 50; 
    child.style.top = top.toString()+"px"; 
    child.style.left = left.toString()+"px"; 
});

在用戶點擊顯示在div： http://jsfiddle.net/7s2mykr9/

document.getElementById('parentDiv').addEventListener('click', function(event) { 
    var child = document.getElementById('childDiv'); 
    var mouseX = event.clientX || event.pageX; 
    var mouseY = event.clientY || event.pageY; 
    var top = mouseY - 50; 
    var left = mouseX - 50; 
    child.style.top = top.toString()+"px"; 
    child.style.left = left.toString()+"px"; 
    child.style.visibility = "visible"; 
});

代碼是存在的，只是清理數學。

我希望它能幫助

來源

2014-08-27 20:40:40 Fer

好吧，我需要兩個組合！ – 2014-08-27 20:47:15

這個例子會在鼠標進入div時創建一個div。當你點擊新的div時，你可以移動它，當你鬆開鼠標時，div會留在你離開它的地方。然後，您可以將其撿起並隨意多次移動。

<!DOCTYPE html> 
<html> 
<head> 
<title>example</title> 
<style> 
    #testArea{ 
     display:block; 
     height:200px; 
     width:200px; 
     border:1px solid black; 
    } 
    #testArea div{ 
     position:relative; 
     display:block; 
     background:green; 
     height:20px; 
     width:100px; 
    } 
</style> 
</head> 
<body> 
    <div id="mousePosition"></div> 
    <div id="dragState">Drag state false</div> 
    <div id="testArea"></div> 

<script> 
    var dragging=false; 
    document.getElementById("testArea").addEventListener("mouseover",function(){ 
     if(!this.firstElementChild&&!this.firstChild){ 
      var newDiv = document.createElement("div"); 
      newDiv.innerHTML="Hello World"; 
      newDiv.addEventListener("mousedown",function(e){ 
       this.style.background="red"; 
       dragging=true; 
       document.getElementById("dragState").innerHTML="Drag state true"; 
      },false); 
      document.addEventListener("mousemove",function(e){ 
       document.getElementById("mousePosition").innerHTML="X: "+e.clientX+" Y: "+e.clientY; 
       if(dragging){ 
        var rect = document.getElementById("testArea").getBoundingClientRect(); 
        newDiv.style.top = e.clientY-rect.top+"px"; 
        newDiv.style.left = e.clientX-rect.left+"px"; 
       } 
      },false); 
      document.addEventListener("mouseup",function(e){ 
       newDiv.style.background="green"; 
       dragging=false; 
       document.getElementById("dragState").innerHTML="Drag state false"; 
      },false); 

      this.appendChild(newDiv); 
     } 

    },false); 

</script> 
</body> 
</html>

來源

2014-08-27 20:28:39

這是你正在嘗試做什麼？

$('.middle-side').on('click',function (e) { 
var x = (e.pageX -this.offsetLeft)+'px', y=(e.pageY -this.offsetTop) +'px'; 
$('<div />', { 
    'class': 'draggable ui-widget-content', 
    text: $('textarea').val(), 
    appendTo: '.middle-side', 
    draggable: { 
     containment: 'parent' 
    } 
}).css({ 
    "position" : "absolute", 
    "top" : y, 
    "left" : x 
}); 
});

我已將此添加CSS：

.middle-side {position:relative;}

見fiddle

來源

2014-08-27 20:38:49

哦，是的，這越來越接近。但是所需的順序是：首先用按鈕單擊將文本附加到div，然後通過鼠標單擊來放置位置。應該只允許點擊「

」內的某個位置，而不要在其他位置。 – 2014-08-27 20:43:27

嗯..是的。它是這樣做的....也許我粘貼了錯誤的鏈接.... http://jsfiddle.net/0wbnud4k/16/ – 2014-08-27 20:54:05

添加'overflow：hidden;'到'。如果你不希望創建的div出現在外面，那麼你可以選擇「middle-side」類。 – 2014-08-27 20:58:35

在另一個div內放置一個div點擊鼠標

回答

相關問題