킹바구니 🦜

scale을 썼을 때, 예를들어 화면을 1280x720으로 작업하고 그보다 작든 크든 scale로 줄이고 키우고 하면 보통은 문제가 없는데, 좌표 기준이 달라져서 그런지 canvas나 drag는 묘하게 이상하게 된다. 예를들어 canvas로 줄긋기를 구현했는데 줄이 이상한 곳에서 그어진다거나, drag같은 경우 드래그 자체는 문제없지만 약간 틀어진 곳에 놔야 놔진다거나 마우스 움직이는거에 비해 잡은 아이템이 느리게 움직인다거나... 암튼 이런거 때문에 짜증났는데 다행히 글이 있었다. 참고로 관련 문제가 생긴다면 이글도 참고 1. 좌표 설정 var click = { x: 0, y: 0 }; $('.draggable').draggable({ start: function(event) { click.x = ev..

드래그 앤 드롭같이 인터렉션한 기능들은 제이쿼리를 빼놓고 하기엔 크로스 브라우징 등의 문제로 쉽지가 않음. 기본적으로 jquery와 jquery ui를 각각 추가해주고 작업하면 된다. 주로 쓸만한 것 위주로 정리함. https://api.jqueryui.com/draggable/ Draggable Widget | jQuery UI API Documentation Description: Allow elements to be moved using the mouse. Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which prov..

단순하게 스크롤을 하단으로 두는 것은 문제없지만, 부모에 아무것도 없다가 append로 자식이 생겨 스크롤이 늘어나는 상황이라면, scrollTop()이나 getBoundingClientRect()등을 써도 자꾸 아무것도 없던 기본 height만 알려줘서 굉장히 난감할때가 있음. 1. 외쳐 제이쿼리 $(".parent").animate({ scrollTop: $(".parent").prop("scrollHeight") }, 500); 제이쿼리도 같이 쓰고 있어서 양쪽으로 찾아보다가 드디어 발견함.

1. click $('a').click(function() { // action }) 단순한 클릭 이벤트 2. on $(document).on('click', '.addBtn', function() { // action }) 동적(기본 html에 써둔 태그말고 자바스크립트 등으로 나중에 별도로 추가된 태그들) 요소에게 줄 수 있는 이벤트. .addBtn 부분은 해당 이벤트를 주고싶은 요소의 id나 class값을 써주면 된다.

단어 data-어쩌고 요소는 DOM에 정보를 저장할 수 있는 방법임. 1. data()사용 $('span').data('index', 2) // index를 2로 바꿔줌 2. attr() 사용 $('span').attr('data-index', 2) 가끔 data()로 썼을 때 안되는 경우 attr로 쓰면 된다. --------------------------------- // 전부 $('li') // $('li.active') // 첫번째 $('li').eq(0) // 의 이전 요소 $('li').prev(); // 의 다음 요소 $('li').next(); // 의 바로 위 부모 요소 (바로 위★) $('li').closest(); // 의 부모 중 .wrap이란 class명을 가진 요소 $('li'..

1. selector가 기준 2. $(this)쓰는데 뭔가 안될 때 확인해봐야할 것 // 이건 된다 $("button").click(function() { console.log($(this).attr("id")); }) // 이건 자바스크립트 함수라서 this를 인식 못한다. function something() { // no console.log($(this).attr("id")); // ok console.log($(event.target).attr("id")); } 쓰고있는 곳이 함수 안인지 그냥 제이쿼리 명령언지에 따라서 $(event.target)나 $(this) 이렇게 따로 써줘야 먹힘. 3. $("selector")는 기본적으로 여러 selector을 선택하긴하는데.. // 3개 전부 가리킴..