Front/JavaScript & jQuery27 [JavaScript] <li> 드래그 앤 드롭, 위 아래로 이동시키기 형태의 요소들을 드래그 앤 드롭으로 위치를 변경하고자 한다. 참고로 태그 외에 다른 것들도 가능하다. 가장 간단한 방법은 제이쿼리 라이브러리 sortable 를 추가해서 쓰는 것이다. 위 방법으로 아주 손쉽게 구현이 가능하다. 하지만 이번에는 자바스크립트를 이용해서 구현하는 연습을 하려고 한다. HTML5 가 제공해주는 드래그 앤 드롭(drag and drop) API를 이용해보자. 0. 드래그 앤 드롭 이벤트 아래 표 내용과 같이 다양한 이벤트가 있는데, dragstart, dragover, dragend를 사용할 예정. dragstart 사용자가 객체(object)를 드래그하려고 시작할 때 발생함. dragenter 마우스가 대상 객체의 위로 처음 진입할 때 발생함. dragover 드래그하면서 마우.. 2021. 12. 21. [JavaScript] 정규표현식으로 html 태그 제거하는 방법, 태그 제거 정규식 문제상황 글자 수를 체크해야 되는 상황인데, CKEditor로 넘기다보니 글자 수 안에 HTML태그들도 함께 들어가게 되었다. 그래서 글자+공백수보다 더 초과해서 글자수로 매겨지는 문제상황이 생겼다. 정규표현식을 이용해서 태그를 제거한 후에 글자수를 체크하여 문제 해결! 아래 정규표현식은 html 태그를 제거하기 위한 식으로 모든 태그를 제거한다. const extractTextPattern = /(]+)>)/gi; 이걸 활용하여 아래와 같이 적용해보았다. //html tag 제거 정규식 var extractTxt = $("#txt-contents").val().replace(/(]+)>)/gi, ''); //글자수 체크 if( extractTxt.length > 500 ) { alert("내용 길이가 .. 2021. 12. 16. [jQuery] 레이어 팝업 오늘 하루 그만보기 쿠키 설정 이 포스팅은 레이어 팝업 예제이므로, 상황에 맞게 변수명 등을 변경해서 사용해야 함! 요즘 웹사이트에서 자주 볼 수 있는 레이어 팝업. 일반 팝업(윈도우창)보다 깔끔하고, 일반 팝업인 경우 특정 브라우저에서의 차단기능으로 팝업창이 뜨지않는 경우가 있기 때문에 레이어 팝업을 자주 사용한다. html 부분 레이어 팝업 오늘 하루동안 보지 않기 닫기 css 부분 #pop { height: 600px; width: 400px; border: 1px solid black; box-shadow: 3px 3px 7px 1px grey; background-color: white; z-index: 9999; margin-left: 36%; margin-top: 6%; position: fixed; } Js 부분 var.. 2021. 11. 29. [jQuery] 홀수, 짝수 인덱스의 요소를 선택하는 선택자 (:even :odd) 기억할 점 : 인덱스는 0부터 시작! 짝수 인덱스의 요소를 선택하는 선택자 :even $("#img-form1 input[type='radio']:even").attr("id"); 홀수 인덱스의 요소를 선택하는 선택자 :odd $("#img-form1 input[type='radio']:odd").attr("id"); 2021. 11. 24. [jQuery] find() 로 하위 요소 찾기 (fisrt, last, gt(), not(), eq()) jQuery find()함수 이용하여 하위 요소를 찾는 방법. 그리고 다른 함수들과 곁들여 사용하는 방법을 알아보자. find() . find()와. children() 함수는 비슷하지만 다르다. . find() : 자식 및 하위 태그 모두 찾을 때 . chilidren() : 바로 아래 요소, 자식 요소만 찾을 때 사용 예시 1 //1. 첫번째 .btn-up을 찾아서 attribute 변경 $("#frm").find(".btn-up:first").attr("disabled", true); //2. 0번째보다 큰 .btn-up을 찾아서 attribute 변경 $("#frm").find(".btn-up:gt(0)").attr("disabled", false); //3. 마지막 .btn-down을 찾아서 a.. 2021. 11. 18. [JavaScript] 요소의 위아래 위치 바꾸기, 위치 변경하기 작업 내용 - up, down 버튼을 클릭하면 으로 잡혀있는 영역 전체 위치를 바꾸어야 함. - 가장 위와 아래는 disabled 처리되어야 함. 방법 - 클릭한 위치의 요소를 기준으로 삼아서 부모, 형제, 가까운 요소를 찾아야 함. jsp 코드 up down js 코드 $("button[name='btnUp']").off("click").on("click",function() { $popupImg.fnMoveUp(this); }); $("button[name='btnDown']").off("click").on("click",function() { $popupImg.fnMoveDown(this); }); /** * Up Down 버튼 클릭시 */ fnMoveUp : function(el) { var $n.. 2021. 11. 18. 이전 1 2 3 4 5 다음
