스스륵잠듬
902
2020-03-26 12:46:06
6
79

스크립트에서 클릭한 위치에 div를 append하는 방법좀 알고 싶습니다.


현재 https://api.jqueryui.com/draggable/#option-axis 를 이용해서 div 박스가 드래그가 되게

했습니다. 드래그 될때 보면 css에서 top,left가 변경됩니다.


그래서 클릭한 위치의 top,left를 가져오고 싶은데 원하는 좌표값이 안나오네요...


        var posX = $(this).position().left;
        var posY = $(this).position().top;
		console.log(posX);
		console.log(posY);
		console.log(e.pageX);
		console.log(e.pageY); 
		console.log($(this).offset().left); 
		console.log($(this).offset().top); 
    	$("#area").append("<div style='left:"+e.pageX+"px; top:"+e.pageY+"px; height:25px; width:25px; position: absolute;'>test</div>");


클릭한 위치에 25px의 div를 append하고 싶은데 조언좀 부탁드립니다.




0
0
  • 답변 6

  • 이설란
    2k
    2020-03-26 13:26:10

    $("#area").append("<div style='left:"+50+"px; top:"+50+"px; height:25px; width:25px; position: absolute;'>test</div>");

    테스트를 해봤는데 append에는 문제가 없어요.

    문제가 있다면 기준점이죠. 저 스타일 left :50과 top 50의 기준은

    브라우저에 좌즉상단 기준입니다. 그걸 계산하셔서 값을 주면 원하는 위치에 div가 만들어질거랍니다.

    0
  • 스스륵잠듬
    902
    2020-03-26 13:30:55

    그 left랑 top의 위치를 어떻게 계산해야 되는지 알수있을까요??


    원하는 위치를 계산 못하고 있습니다...ㅠ

    0
  • 이설란
    2k
    2020-03-26 13:38:42 작성 2020-03-26 13:39:22 수정됨

    var area = $("#area");

    var areaLeft = area.offset().left;

    var areaTop = area. offset().top;

    이런식으로 osffset의 위치를 사용하시면 되요. 이건 document 기준이에요.


    혹시 테그 위치가 아니라 마우스 클릭 위치를 물어보시는건가요?

    0
  • 스스륵잠듬
    902
    2020-03-26 13:44:29

    네. 클릭위치를 못구하겠습니다...

    area 영역을 클릭했을때 클릭한 위치에 div를 추가 하고자 합니다.

    0
  • 이설란
    2k
    2020-03-26 13:57:29

    $("#area").click(function(event){

    //클릭이 발생시 좌, 우 위치값을 출력

    var x = event.clientX

    var y = event.clientY

    alert("x : " +x + "  -  y : "+y);

    });

    0
  • 스스륵잠듬
    902
    2020-03-26 13:58:24

    감사합니다.!!!

    조금 어긋나는거는 마이너스로 처리했습니다.!!

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.