마우스 클릭시 다른 div 안에 div 배치하기

버튼 클릭으로 다른 div (컨테이너) 안에 배치 할 수있는 draggable div를 생성 할 수 있습니다. 버튼 클릭으로 생성 된 div는 부모 (컨테이너) div의 왼쪽에 자동으로 배치됩니다. 그런 다음 사용자는 원하는 위치로 드래그 할 수 있습니다. 사용자가 새 div를 생성 한 다음 마우스 클릭으로이 새 div의 위치를 결정할 수있게하는 방법이 있습니까?마우스 클릭시 다른 div 안에 div 배치하기

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

HTML

enter image description here

jQuery를 : 사용자로

JSFIDDLE이 아래와 같이 임시 가이드 뭔가 어떤 종류의를 제공하는 위치를 알아내는 용기를 유혹한다

<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

도움이되기를 바랍니다? 꽤 많이 내부 div의 좌표를 X == [currentMouseX - (divWidth/2), currentMouseY - (divHeight/2)]로 설정하게 될 것입니다. – Fer

잘 모르겠습니다. Jsfiddle에서 그것을 보여줄 수 있습니까? –

방금 게시 한 두 예제입니다. 첫 번째 질문은 질문을 다시 읽은 후 더 직접적으로 관련이 있다고 생각하지만 둘 다 확인할 수 있습니다. 행운을 빕니다. – Fer

를 참조하십시오

$('.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이 추가 div :

클릭 디스플레이에 16,

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"; 
});

사업부 : 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"; 
});

코드가 그냥 수학을 정리.

가 나는 이유는 바로 부모 DIV의 온 클릭 (내부) 절대 설정된 좌표 사업부의 위치를 제작하지, 질문을 오해하고 있지 않다 경우는

출처

2014-08-27 20:40:40 Fer

좋아, 나는 두 가지의 조합이 필요합니다! –

이 예제는 마우스가 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 {position:relative;}

가 fiddle

출처

2014-08-27 20:38:49

아, 그래, 점점 가까워지고있어. 그러나 원하는 순서는 다음과 같습니다. 먼저 버튼을 클릭하여 div에 텍스트를 추가 한 다음 마우스 클릭을 통해 위치를 배치합니다. '

'안의 위치에 대해서만 클릭을 허용하고 다른 위치는 허용하지 않아야합니다. –

음 ... 예. 그건 .... 어쩌면 나는 잘못된 링크를 붙였다. http://jsfiddle.net/0wbnud4k/16/ –

'overflow : hidden;'을'에 추가한다.생성 된 div가 바깥에있는 것처럼 보이지 않게하려면 '중간 쪽'클래스를 선택하십시오. –

마우스 클릭시 다른 div 안에 div 배치하기

답변

관련 문제