Sortable.create('id_of_container',[options]);
위 코드이 Sortable을 사용하는 기본 문법이다. id_of_container에 드래그앤드롭을 가능하게 할 엘리먼트의 id를 주고 options에 드래그앤드롭에 대한 옵션을 JSON형태로 던져주면 바로 정렬가능한 드래그앤드롭을 사용가능하다. id_of_container이라고 쓴 것처럼 드래그할 객체가 아니라 드래그할 객체들을 담고 있는 container의 id를 주면 되고 options는 안주면 디폴트옵션으로 동작하게 된다.
예를 들어
<ul id="contailner">
<li id="dnd_1">Test 1</li>
<li id="dnd_2">Test 2</li>
<ul>
<script type="text/javascript">
Sortable.create("contailner");
</script>
위와같이 작성하면 dnd_1, dnd_2객체가 바로 드래그앤드롭이 가능하다. (이 얼마나 간단하단 말인가. ㅎㅎㅎ)
이제 옵션을 보자. 자유롭게 사용하려면 옵션을 주어서 원하는 형태로 사용하여야 한다. 옵션은 Draggable과 공통적인 것도 있고 아닌것들도 있다.(아직 Script.aculo.us의 API리스트는 솔직히 좀 아쉽다.) API와 내가 테스트해본걸 바탕으로 적었지만 빠진 부분이 있을수도 있다.
tag : 여기에 HTML태그명을 주면 해당 태그에 대해서 Sortable이 동작하게 된다. 디폴트는 li태그이고 container아래 한단계 밑까지만 동작한다. 쉽게 말해 li안에 li가 또 들어있다고 하더라도 안에 있는 li에는 드래그앤드롭이 동작하지 않는다. Block엘리먼트에만 가능하고 table같은걸 블가능하다.
only : 이 옵션을 주고 여기서 class명을 지정하면 tag에 설정한 태그명이라고 할지라도 only에서 준 class명과 맞지 않으면 드래그앤드롭이 동작하지 않는다.
overlap : 가로 리스트는 horizontal, 세로 리스트는 vertical로 설정하라는데 정확한 동작은 잘 모르겠다.
constraint : horizontal, vertical, false 3가지가 있고 드래그앤드롭의 방향을 설정한다. horizontal/vertical로 설정할 경우에는 가로/세로로만 이동하며 false나 옵션을 주지 않았을 경우에는 어떤 방향이든지 이동이 가능하다.
containment : 이곳에 container 리스트를 지정하고 이곳에 지정한 container간에는 드래그앤드롭이 가능하다.
handle : 드래그앤드롭을 할 엘리먼트에서 전체가 아닌 특정부분만을 이용해서 드래그앤드롭이 가능하도록 하고 싶을때 handle이용한다. 이곳에 id 혹은 class명을 지정하면 핸들러로 사용할 수 있다.
delay : 드래그앤드롭으로 반응할 시간을 미리세컨단위로 설정할 수 있고 기본은 0이다. 너무 민감하게 반응하지 않기를 바랄때는 delay의 숫자를 크게 지정할 수 있다.
dropOnEmpty : true로 설정하면 container가 비어있을때도 drop이 가능하다. false일 경우에는 container에 다른 드래그앤드롭객체가 있을때만 드롭이 가능하다. 기본은 false
scroll : 기본으로는 지정되어 있지 않으며 window로 설정할 경우에는 드롭할 container가 화면밖에 있을경우에 드래그객체가 화면밖으로 나가면 자동으로 스크롤한다.
scrollSensitivity : 기본은 20이고 스크롤이 되게 하기 위해서 넘어가야하는 크기를 지정한다.
scrollSpeed : 스크롤 속도이고 픽셀로 지정하면 기본은 15이다.
onChange : 콜백함수로 드래그앤드롭을 시작하는 등 객체의 위치가 변경되면 계속 발생한다.
onUpdate : 콜백함수로 드래그앤드롭을 하여 실제 순서의 변화가 생겼을때만 발생한다.
only : 이 옵션을 주고 여기서 class명을 지정하면 tag에 설정한 태그명이라고 할지라도 only에서 준 class명과 맞지 않으면 드래그앤드롭이 동작하지 않는다.
overlap : 가로 리스트는 horizontal, 세로 리스트는 vertical로 설정하라는데 정확한 동작은 잘 모르겠다.
constraint : horizontal, vertical, false 3가지가 있고 드래그앤드롭의 방향을 설정한다. horizontal/vertical로 설정할 경우에는 가로/세로로만 이동하며 false나 옵션을 주지 않았을 경우에는 어떤 방향이든지 이동이 가능하다.
containment : 이곳에 container 리스트를 지정하고 이곳에 지정한 container간에는 드래그앤드롭이 가능하다.
handle : 드래그앤드롭을 할 엘리먼트에서 전체가 아닌 특정부분만을 이용해서 드래그앤드롭이 가능하도록 하고 싶을때 handle이용한다. 이곳에 id 혹은 class명을 지정하면 핸들러로 사용할 수 있다.
delay : 드래그앤드롭으로 반응할 시간을 미리세컨단위로 설정할 수 있고 기본은 0이다. 너무 민감하게 반응하지 않기를 바랄때는 delay의 숫자를 크게 지정할 수 있다.
dropOnEmpty : true로 설정하면 container가 비어있을때도 drop이 가능하다. false일 경우에는 container에 다른 드래그앤드롭객체가 있을때만 드롭이 가능하다. 기본은 false
scroll : 기본으로는 지정되어 있지 않으며 window로 설정할 경우에는 드롭할 container가 화면밖에 있을경우에 드래그객체가 화면밖으로 나가면 자동으로 스크롤한다.
scrollSensitivity : 기본은 20이고 스크롤이 되게 하기 위해서 넘어가야하는 크기를 지정한다.
scrollSpeed : 스크롤 속도이고 픽셀로 지정하면 기본은 15이다.
onChange : 콜백함수로 드래그앤드롭을 시작하는 등 객체의 위치가 변경되면 계속 발생한다.
onUpdate : 콜백함수로 드래그앤드롭을 하여 실제 순서의 변화가 생겼을때만 발생한다.
아주 간단한 예제를 만들었다. 동작과 소스코드를 보면 쉽게 이해할 수 있을꺼라고 생각한다. 최근 작업을 하면서 몇가지 주의점(?)을 발견한 거라면...
- container의 id에 언더바(_)가 들어가면 동작하지 않는다.
- Sortable.serialize를 사용하려면 드래그앤드롭 엘리먼트의 아이디가 언더바(_)로 이어져야 한다. 언더바 뒤쪽에 있는 문자만 표시된다.
- IE에서는 왼쪽 콘테이너에서 오른쪽 콘테이너로 갈때 드래그엘리먼트가 컨테이너 뒤쪽으로 가는 문제가 생긴다. 드롭하기 위해서 반이상 넘어갈 경우에는 위로 올라오는데 이건 IE의 z-index버그때문에 생기는 문제로 예상되는데 정확한 해결책은 아직 찾지 못했다.
그리고 예제의 소스를 보면 알겠지만 기본적으로는 드래그앤드롭을 할 때 해당위치의 공간은 표시하지만 따로 표시되지는 않는다. 이 문제를 해결하기 위해 더미 엘리먼트를 만들었다. OnChage가 발생할 때 해당 엘리먼트의 바로 앞쪽에 더미엘리먼트를 만들어서 insert한다. 이렇게 함으로써 드롭했을때 떨어질 위치가 명시적으로 보일수 있도록 하고 OnChange는 계속 발생하기 때문에 처음에 더미엘리먼트를 지우고 다시 넣어주기 때문에 다른 컨테이너로 넘어가는 순간 더미엘리먼트도 적절하게 이동된다. 깔끔한 해결책은 아닌듯 하지만 일단 동작은 한다.
유용한 소스 감사합니다
물어볼게 있어서요
추가,삭제가 가능한가요?
가능하다면 알려주실수 있나요?
다른 방법이 또 있는지는 모르겠지만 저같은 경우는 엘리먼트를 추가한 다음에 Sortable.create("contailner");를 다시 실행시켜주었습니다.
Sortable.create("contailner");를 실행시키면 하위 엘리먼트를 드래그앤드롭으로 할 수 있기 때문에 엘리먼트 추가후에 다시 실행시켜준 것입니다.
삭제는 어차피 엘리먼트가 사라지면 드래그앤드롭은 물론이고 핸들링자체를 할 수 없기 때문에 삭제는 그냥 원하는 엘리먼트를 삭제해 주시면 됩니다.
답변 감사합니다...하지만...잘 모르겠습니다.^^;;
정확하게 엘리먼트를 어떻게 추가하는건지 또 엘리먼트를 삭제하는건지 알려주실수 있나요?
흠... 위에 소스코드를 써놓은 곳을 보면 contailner라는 id를 가진 UL엘리먼트안에 dnd_x라는 아이디를 가진 LI엘리먼트가 드래그앤드롭이 가능한 건데요. 여기서 엘리먼트를 추가/삭제하는 것은 LI엘리먼트가 동적으로 추가됐다 삭제하는 경우를 말씀하시는 것 같은데요. 맞나요?
어느정도까지 아시는지 몰라서 어디서부터 설명해야 할지 모르겠는데요.
가장 간단한 것은 innerHTML을 사용하는 것입니다.
var obj = document.getElementByID("contailner");
obj.innerHTML = obj.innerHTML + "<li id='dnd_3'>Test 3</li>"
같은 형태로 추가할 수 있습니다. 아니면 DOM 메서드를 사용하셔야 하는게 간단하게는 innerHTML이 편하실 겁니다. innerHTML은 말그대로 내부의 HTML을 교체하는거라서 특정엘리먼트 삭제로 쓰기에는 쉽지 않고요. 삭제는 DOM의 removeNode같은 메서드를 쓰셔야 할겁니다. 위의 내용은 js에서 제공하는 내용이고요.
script.aculo.us를 쓰신다는 것은 prototype.js는 당연히 쓰실테니까 prototype.js의 Element클래스나 script.aculo.us의 Builder를 쓰시면 훨씬 편하게 엘리먼트 추가/삭제를 쓰실수 있습니다.
http://www.prototypejs.org/api/element 여기를 참고하시면 되고요. 추가할때는 insert()나 update()를 쓰시면 되고 삭제는 remove()를 쓰시면 됩니다.
$("contailner").insert("<li id='dnd_3'>Test 3</li>");
$("contailner").update("<li id='dnd_3'>Test 3</li>");
$("dnd_3").remove();
위처럼 사용하시면 됩니다. insert는 추가하는 것이고 업데이트는 현재 내부의 새로운 내용으로 교체하는 것입니다. remove()는 해당 엘리먼트가 삭제되고요. 다량의 엘리먼트를 추가하는 것은 http://blog.outsider.ne.kr/226 를 참고하셔도 됩니다.
댓글이라 자세히 설명드리기가 힘드네요. 이해안되시는 부분 있으시면 말씀해주세요.
좋은정보 감사합니다 ^^
자주 들릴게요~
예 감사합니다.
주말 잘 보내세요~ ^^
안녕하세요 다시 들렀습니다
작업하다가 모르는게 있어서 다시 질문드려요
Sortable.serialize('container1')
이렇게 하면 담아지는것들을 메세지로 뿌려주는데 저는 이것을 텍스트박스로 넘겨준후 뒷단에서 &로 자르고 다시 =으로 자르고 값을 받는데
값만 받아올수 있는 방법은 없는지 또 글자들이 깨져서 넘어오는데 처리방법이 있는건지 알려주시면 고맙겠어요
이렇게 매번 질문만 드려 죄송해요... 좋은하루되세요
죄송하긴요... 그러면서 저도 한번 소스다시보고 생각해 보면서 배우는거죠.. ㅎㅎㅎㅎ
제가 정확히 이해했는지 모르겠는데 스트링을 2번 split하는것 때문에 줄때 값만 주고 싶다는 말씀이시죠? Sortable.serialize()이 URL형태로 만들어 주는 것이라서 약간 수정은 가능하지만 형태자체를 바꾸기는 어려울듯 합니다.
아예 원하는 형태로 만드시려면 Sortable.serialize()를 이용하지 마시고 container에서 원하는 값을 직접 만드셔야 할것 같습니다.
예제 소스의 showMessage()를 아래처럼 하시면 될듯 합니다.
var tempStr = ""; $('container1').childElements().each(function(arg) {
tempStr += arg.id.replace("out_", "") + "&";
})
$("message").update("container1 : " + tempStr);
container1에 대해서만 적용했습니다. 간단히 설명드리면 container1의 1depth아래의 엘리먼트들만 배열로 가져와서(여기서는 out_x의 id값을 가진 div들이겠죠) 루프돌면서 해당 div의 id값에서 out_부분만 잘라내서 숫자값만 가져와서 이어붙힌 것입니다.
글자들이 깨져서 나온다는건 한글이 깨지는 건가요? 이부분은 자세한 내용을 몰라서 뭐라 말씀드리기 어렵네요..
관리자만 볼 수 있는 댓글입니다.
그러나 제가 원하는 건
서버를 이용하여 이동 된 정보를 그대로 가지고 있다가 다시 로그인 하였을 경우
각 컨테이너에 변경된 정보데로 드래그앤드랍
안녕하세요 님이 올려주신 좋은 정보 정말 감사합니다.
전 i구글처럼 각 컨텐츠를 이동 할수 있는 웹페이지를 만들고자 합니다.
그래서 sortable에 대해 공부를 시작하게 되었습니다.
드래그앤드롭을 한객체가 이동을 하였을 경우
Sortable.serialize()를 이용하여 각 컨테이너의 정보를 추출하는 것까진 할수 있었습니다.
그러나 제가 원하는 건
서버를 이용하여 이동 된 정보를 그대로 가지고 있다가 다시 로그인 하였을 경우
각 컨테이너에 변경된 정보데로 컨텐츠들이 나타나게 하고 싶습니다.
님께서 올려주신 자료에 의하면 서버를 이용하면 가능 하다고 하는데
어떻게 해야 하는건지 알수가 없어서 이렇게 글을 남기게 되었습니다.ㅠㅠ
인터넷을 아무리 찾아봐도 제가 원하는 정보는 나오지 않아 이렇게 요청하게 되었습니다.
제가 너무 귀찮게 해드리는건 아닌지.. 죄송합니다.
그럼 좋은 하루 되시고, 요즘 비도 자주 오고 덥기도 덥고 하지만 좋은 하루 되시길 바랍니다.
그럼 이만..
다른 댓글들은 겹치는 내용이라서 이글에만 답글을 달겠습니다.
예 저도 iGoogle형태의 드래거블한 위젯페이지를 만드느라고 저걸 만져보았었습니다.(그 소스도 정리해서 한번 올릴려고 생각은 하고 있는데 영 못하고 있네요.. ㅎㅎ)
serialize()가 각 컨테이너의 위치를 저장하기 위한 용도로 하기위해서 제공되는 메서드인데요. 예제에서는 1,2,3 이런식으로 위젯의 번호가 붙어있지만 일반적으로 각 위젯의 고유 id값 같은 것이 있을 겁니다. 이제 그걸 저장해야되는데요.
저같은 경우는 위젯페이지 특성상 페이지 갱신이 일어나면 안되기 때문에 serialize()로 얻은 각 컨테이너의 위젯정보를 Ajax로 서버에 전송하였습니다. 지금 소스가 없어서 정확히 기억은 않는데요 container1=1^4^2 이런식으로 보내고 디비에 저장하는 것이죠. 그리고 최초로딩시에 저장된 값이 있는지를 확인해서 저장된 값이 있을경우 불러와서 위치에 맞게 위젯을 불러드립니다. 답변이 되셨을지 모르겠네요. ^^
단변 정말 감사 합니당!
그러나 아직 의문점이 남아 글을 남깁니다.
serialize()을 이용하면 컨테이너의 정보를 출력하는걸로 알고 있습니다.
뭐~;; 출력한 정보를 DB에 넣는건 알겟는데
DB에 있는 값을 어떻게 컨테이너로 초기화 시키는지를 모르겠습니다. ㅠㅠ
그리고 한가지더 의문점은 DB를 설계 하는 부분입니다.
전 회원제의 웹페이지를 만들고 있는데
DB 설계중 ID table을 만들었습니다. 이 table에는 총 4개의 컨테이너를 저장 할수 있도록 하였고... ID 별로 컨테이너들의 정보를 따로 저장하도록 하였습니다.
제가 분석 해본결과 serialize()는 컨테이너의 정보.. 즉 위젯들을 직렬화 화여 저장하는 것으로 알고 있습니다.
한마디로 각 위젯의 정보를 DB에 저장하기 보단 컨테이너의 정보만을 저장 한 후..
컨테이너의 정보를 그대로 불러 들려 초기로딩시에 그 정보를 불러오면 되지 않을까 생각이 듭니다.
어차피 직렬화 되어 있는 데이타를 DB에 저장 하는 것이라 가능 할꺼라 판단이 됩니다.
먼저 어떻게 DB에 저장된 값을 초기 로딩시 올리는지 ..ㅠㅠ 거기에 간한 간단한 소스나..
자료가 있다면 소개 좀 해 주시면 안될까요?
정말 계속 귀찮게 해드려서 정말 죄송합니다.ㅠㅠ
이부분만 해결되면 ㅠㅠ 거의 70%는 해결 되는데 ㅠㅠ 부탁드리겠습니다 ㅠㅠ
어제부터 비가 그치고 날씨가 많이 더워졌는데..
더위 조심하시구~ 좋은 하루 되세욤^^
흠... 약간은 혼동하고 계시는 것이 Sortable클래스는 순서가 있는 Drag N Drop에 대한 것만 지원하고 그외 다른 부분에 대한 메카니즘은 제공하고 있지 않습니다. 다른 부분에 대해서는 다른거 만드는 것과 동일하게 직접 짜야하는 건데 위젯과 드래그앤드롭이라는 부분때문에 약간 헷갈려 하시는것 같습니다.
초기화는 처음 페이지를 만들때와 동일합니다. 초기화라고 할것도 없는게 포스팅의 예제를 보면 ul안에 li를 넣고 ul에 Sortable가능하게 만들어 버리면서 맨처음 시작합니다. 디비에서 가져와서 달라지는 것은 ul안에 li에 넣는 순서를 디비에서 가져온 순서대로 넣으면 된다는 것만 다를 뿐입니다. ul밑에서 for문돌면서 디비에서 가져온 순서대로 위젯을 불러내서 찍어낸 다음에 Sortable.create("contailner"); 하시면 됩니다. 물론 어떤 정보를 가지고 위젯의 내용을 가져오냐는 다른 얘기이지만 최초에 위젯이 있었으니(저장하기 전에) 각 위젯을 식별할 수 있는 어떤 값은 가지고 계시리라 생각합니다.
저도 이 작업을 했을때 클라이언트 사이드만 진행을 했기 때문에 디비는 관여하지 않았습니다만 말씀하신대로 컨테이너별로 컬럼이 있고 거기에 위젯순서의 정보가 들어있으면 되지 싶습니다.
엉망이지만 작성한 소스가 있기는 하지만 지금 가지고 있지 않은 관계로 그냥 말씀드리면 저같은 경우는 JSON을 이용했는데요 위젯의 순서를 가지고 있는 JSON객체를 하나 만들었습니다.
defaultWidjet = { 'container1': 'w01^w02^w03', 'container2': 'w04^w05^w06'}
같은 형태로 만듭니다. 그리고 userWidjet같은 js객체에 서버가 위와 동일한 형태의 JSON을 만들어져 할당시켜버렸습니다. 최초 한번도 저장하지 않아서 아무값도 없는 경우에는 defaultWidjet을 사용했습니다.(최초접속했을때 나타날 위젯의 순서입니다.) 저같은 경우는 각 위젯에 대한 코드(날찌나 달력 같은)가 js로 모두 구현되어 있었는데요. onload시에 위젯초기화 함수를 실행시키고 이 함수가 위의 JSON객체에서 값을 꺼네서 각 위젯의 코드를 동적으로 생성에서 해당 컨테이너에 넣어버리고 다 넣은 뒤에 Sortable.create("contailner");로 완료했습니다.
container의 숫자는 원래 약속된 사항이기 때문에 container1의 값인 w01^w02^w03을 가져와서 split로 배열로 만들어서 루프돌면서 w01에 대한 위젯코드를 생성해서 contaner1에 넣고 하는 방식입니다.
지금 소스를 보고 있는 것이 아니라서 간단하게만 설명드렸는데 초기화하는 순서는 저런 방식으로 구현했었습니다. 실제 구현하면 여러가지 예외의 경우가 있을 것이기 때문에 JSON객체의 구조는 꼭 저렇게 하시면 된다는 것 아닙니다. 실제론 좀더 복잡해 지겠죠.
안녕하세욤..;; 이렇게 여러번 글을 남기게 되어 정말 죄송합니다.
제가 잘못 알고 있었나요?;;
sortable.serialize() 하여 출력하면 컨테이너의 정보를 출력 해주는 것이라
당연히 그 정보만을 저장하여 이 정보를 다시 그대로 뿌려주면 된다고 생각 했었는데..
그렇게 할순 없나요?
님이 말씀하시는거에서 이해는 좀 되지만 어떻게 코딩을 해야 할지 정말 감이 잡히지 않네요
이 글 올리시고 오늘까지 계속 보고 코딩해볼려고 했는데 안되네요.
그리고 제가 db 설계가 잘 못 된 것 같기도 한데..
님이 db 설계 하실땐 어떻게 하셨는지 간단히 설명 좀 해주면 안될까요? ㅠㅠ
이번 방학 끝나기 전까지 이부분 마무리 해야 되는데 정말 난감하네요.
여기에 대한 서적도 별루 없고..ㅠㅠ 아~;;;
부탁드리겠습니다.ㅠㅠ
위에 말씀드렸듯이 sortable.serialize()는 저장이 쉽도록 QueryString으로 만들어줄뿐 초기화에 사용하는 것은 아닙니다. 제가 DB를 설계하진 않아서 DB쪽은 어떻게 했었는지 모르겠지만요.. 제 생각으로 설명드리자면 container1만 있다고 하고 설명을 드리면
회원 테이블에 id, container1이란 테이블이 있겠죠.
회원이 위젯을 "weather" "stock" "clock" 순으로 저장했다고 가정하겠습니다. 그럼 container1[]=weather&container1[]=stock&container1[]=clock 와 같이 되겠습니다. 아이디를 저 이름으로 나오도록 했다고 가정하겠습니다. PHP나 RoR은 저걸 Array로 받을 수 있다고 하는데 굳이 그렇게 쓸것 아니면 위에 말씀드린데로 그냥 저장된 순서대로 가져와서 weather^stock^clock 로 스트링을 만들어서 서버로 전송하고 저장해도 됩니다. 그냥 간단히 설명드리기 위해 스트링 통째로 저장한다고 하겠습니다.
그럼 해당아이디의 container1 필드에 weather^stock^clock가 저장되겠죠. 그럼 해당유저가 다시 접속했을 때 container1의 값을 가져옵니다.(없을경우는 초기값이 있어야 되겠죠.)
weather^stock^clock를 ^단위로 split해서 루프를 돌립니다.
"weather^stock^clock".split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
})
위에처럼 루프돌리시면 될것 같습니다. 여기서 function안에 있는 함수는 그냥 이름지은 함수입니다. 구현하셔야 합니다.
getWidget은 위젯의 이름을 넘겨주면 위젯의 코드를 리턴에 주는 함수이고요. div형태나 li등의 형태이고 그 안에 시계나 날씨를 보여주는 소스들이 들어있겠죠.
그렇게 받은 소스를 container1에다가 넣어주는 거죠. container2,3이 있다며 또 그에 맞게 작성을 해주어야 합니다.
저는 JSON을 이용해서 했지만 복잡하게 설명드리면 더 헷갈리실것 같아서 간단하게 설명드렸습니다. getWidget() 같은 경우는 가장 간단하게 구현시다면 함수안에 if-else if문이나 select-case문으로 위젯이름별로 HTML을 죽 써놓고 리턴해 주시는게 제일 간단하시겠네요.
그리고 저 소스는 당연히 container1에 넣어주실 것이므로 window.onload에 걸어주셔야 합니다.
나름 찬찬히 설명드린다고 하긴 했는데... 잘 이해안되시면 부담갖지 말고 물어봐 주세요. ㅎ
안녕하세요.. 친절히 설명 해주셔서 정말 감사 합니다.
제가 머리가 많이 안 좋나봐요;
아님 체계적으로 공부를 안하고 무작정 만들어서 그런건지..ㅠㅠ
조금 이해가 안되는 부분이 있어서요..;;
-----------------------------------------
그럼 해당아이디의 container1 필드에 weather^stock^clock가 저장되겠죠. 그럼 해당유저가 다시 접속했을 때 container1의 값을 가져옵니다.(없을경우는 초기값이 있어야 되겠죠.)
weather^stock^clock를 ^단위로 split해서 루프를 돌립니다.
"weather^stock^clock".split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
})
위에처럼 루프돌리시면 될것 같습니다. 여기서 function안에 있는 함수는 그냥 이름지은 함수입니다. 구현하셔야 합니다.
--------------------------------------
이부분이 이해가 되지 않습니다..
split() 를 이용하여 루프를 돌리라니..;; 어떻게 해야 한다는거죠?
아;; 그리고 의문점이..
제가 만든것에는 각 컨테이너에 두개의 위젯들이 미리 들어가 있습니다.
소스로 작성하여 뛰어뒀죠..;;
디비에 저장 되어 있는 정보와 틀리다면 기존의 위젯들의 위치가 변경 될수 있나요?
쉽게 생각 한다면 실행시 "대한민국" 이라는 글짜가 적혀 있도록 만들었는데..
이 글자가 "한국"이라고 변경이 가능하도록 되는지;;; 설명이 좀 이상한가요?ㅠㅠ
다시한번 답변 부탁드릴께요.
요즘 날씨가 많이 더운데 더위 조심하세요..
그리고 늘 상세한 답변에 감사합니다. 이렇게 답변해주시기 어려우실텐데 감사합니다.
소스를 작성해 드렸는데 prototype.js를 이용한 소스라 익숙치 않으신듯합니다.
설명드렸던 내용에서 weather^stock^clock 는 container1에 들어있는 위젯의 순서를 의미합니다. 그럼 split("^")를 하시면 ^를 기준으로 각 스트링이 배열로 나오게 됩니다. 배열[0]은 weather, 배열[1]은 stock, 배열[2]은 clock가 들어가게 되지요. 이 배열을 each문으로(prototype.js함수입니다.) 루프를 돌린것입니다. each가 익숙치 않으시면 for (var i = 0; i < 배열.size(); i++)같이 for문을 돌리셔야겠습니다.
이렇게 배열을 돌린 것은 각 위젯의 소스를 가져와서 container1에 추가해주기 위해서입니다. getWidget()함수로 각 위젯의 소스를 가져오도록 정의한다는 것은 위에 설명을 드렸고요(함수를 따로 한것은 재사용을 위한것이고요.) getWidget이 각 위젯의 이름을 받아서 원하는 소스를 리턴할 수 있게 만들기 위해서 위에서 스트링을 split해서 각 위젯의 이름을 얻어낸 것입니다. 그렇게 받은 위젯의 소스를 인서트해준 것이고요.
최초에 위젯이 들어있으시다면 해당정보와 다르다면 해당내용을 지우고 새로 넣으셔야 합니다. 해당 위젯의 위치만 변경하는 것은 쉽지 않을것 같습니다. 말씀하신대로 단순히 글자를 바꾸는 것은 간단합니다만 이건 글자를 바꾸는 것이 아니라 위치를 바꾸는 것이라 차라리 container내부의 내용을 지우고 다시 인서트하시는게 더 편하실 듯 합니다.
기존의 초기 위젯들을 소스에 넣어놓으셨다면 예를 들어 userWidgetList라는 자바스크립트 변수를 하나 만드시고 디비에서 받아온 값을 이 변수에 넣습니다. 만약 디비에 저장된 내용이 없다면 아무것도 안들어갈테니 userWidgetList == ""인지를 검사해서 userWidgetList가 ""이 아니라면 2개의 컨테이너의 내부내용을 지우시고 위에 설명드린 내용대로 유저가 저장한 위젯순서대로 다시 인서트 해주시면 됩니다. userWidgetList가 ""라면 아무처리도 안해버리면 초기에 넣으신 소스의 값이 그대로 있겠지요.
container내부의 내용을 지우고 추가하는 내용은 http://blog.outsider.ne.kr/358 의 내용을 참고하시면 될 것 같습니다.
아;; 설명 정말 감사 합니다.
혹시 getWidget() 함수는 제가 따로 구현을 해야 하는건가요?;;
우훔;; 지원해주는건 아닌가 해서요;;
너무 초보적인 질문인듯..ㅠㅠ 죄송합니다.
한참 안오셔서 다 해결하신줄 알았더니 아니었군요.
예 getWidget()는 위에 설명한 기능대로 하는 함수를 직접 구현하셔야 합니다. 프로토타입이나 스크립타큘러스는 공통적으로 사용할 수 있는 부분만 지원을 하고 그 외부분은 직접 만드셔야 합니다. ^^
아~ 오랜만에 들어 왔네요..
다른부분을 먼저 구현한다고 여기 사이트에 자주 들어 오지 못했네요
이제 DB 부분만 해결하면 논문이 끝이 나는데 왜 이부분만 되지 않는건지 정말 모르겟네요.ㅠㅠ
정말 죄송하지만..
"weather^stock^clock".split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
})
이부분의 getWidget() 부분을 간단한 소스로 코딩해주시면 안될까요?ㅠㅠ
제 소스가 메인페이지에..
<div id="container1" class="container">
<div id="out_1" class="widjet">
<div class="handler">Test 1</div>
<div class="content">내용....</div>
</div>
<div id="out_2" class="widjet">
<div class="handler">Test 2</div>
<div class="content">내용....</div>
</div>
</div>
<div id="container2" class="container">
<div id="out_3" class="widjet">
<div class="handler">Test 3</div>
<div class="content">내용....</div>
</div>
<div id="out_4" class="widjet">
<div class="handler">Test 4</div>
<div class="content">내용....</div>
</div>
</div>
부분이 있습니다.
아무리 생각 해도 out_1 ~ out_4까지의 정보를 디비에 저장 한 후 .. 어떻게 땡겨 쓰는지
알수가 없습니다. 님이 알려주신 방법으로 하면 될 것 같은데 getwidget() 함수에 사용에 대해서 코딩하기가 어렵습니다. ㅠㅠ
이번달까지 이부분만 마무리하면 논문이 완성되는데 조금만 도와주세요
가능 하다면 부탁좀 드리겠습니다. ㅠㅠ
저는 프로젝트에서 사용하시는줄 알았더니 논문이었군요. ㅡ..ㅡ
구성하기 나름이라서 설명드리기 애매하긴 한데요.
간단히 작성했습니다.
-----------------------------------------------------
var widjetList = [
{title:'Test 1', id:'out_1', content:'내용....'},
{title:'Test 2', id:'out_2', content:'내용....'},
{title:'Test 3', id:'out_3', content:'내용....'},
{title:'Test 4', id:'out_4', content:'내용....'}
];
var widjetTpl = new Template(
'<div id="#{id}" class="widjet">' +
'<div class="handler">#{title}</div><div class="content">#{content}</div>' +
'</div>'
);
function getWidget(wd) {
var result;
widjetList.each(function(par) {
if(par.id == wd) {
result = widjetTpl.evaluate(par);
}
});
return result;
}
document.observe('dom:loaded', function() {
"out_1^out_3^out_2".split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
})
});
-----------------------------------------------------
container1에 대해서만 구현했습니다. 어떤식의 구상을 하고 계신지 몰라 제가 생각한대로 구현했습니다.
widgetList에는 JSON형태로 각 위젯의 정보가 들어있습니다.
widgetTpl에는 scriptaculous에서 제공하는 Template형식으로 위젯의 공통부분이 되는 HTML이 스트링으로 들어있습니다. 이 템플릿에 JSON객체를 넘기면 자동으로 #{}에 해당 값이 자동으로 할당되게 되어 있습니다.
그리고 getWidget에서는 JSON에서 id로 원하는 객체를 찾아서 템플릿에 HTML을 생성해서 리턴합니다.
이제 HTML이 로드된뒤에 컨테이너에 위
아.. 안녕하세요..ㅠㅠ
님 너무 많이 도와주셔서 정말 감사 합니다.;
뭐..;; 논문이라고 말은 했지만.. 실제로 졸업프로젝트입니다;
학교 다닐때 웹쪽 공부를 많이 못해서 ;
졸업프로젝트로 한번 해봤는데 생각 보다 너무 어렵네요..
님이 설명 해주신거 정말 잘 봤습니다.ㅠㅠ
그런데 잘 안되네요 ㅠㅠ
일딴 제 소스는 님이 예제로 올려주신 소스와 거의 동일합니다.
드래그 앤 드랍 방식은 님이 올려주신 소스를 참조 하였기 때문에..
님이 답변 해주신데로 해봤는데..ㅠㅠ 결국 되지 않고 있습니다..
월요일까지 교수님께서 해결해 오라고 해서..
DB 구축이 잘못 된건가 해서 DB 구축도 다시 해보고 님이 올려주신 자료를
토대로 해봤지만 ㅠㅠ 전혀..ㅠㅠ 해결이 나지 않고 있습니다..ㅠㅠ
아~;;
죄송하지만 님이 올려주신 소스를 토데로.. ㅠㅠ 디비 정보를 가지고 와 위치 변경 할수 있는거 간단히 예제로 좀 알려주시면 안될까요?
월요일까지 해결해야 하는데 지금 4일째 밤새면서 해도 해결이 나지 않아 죽겠습니다. ㅠㅠ
이부분만 해결하면 나머지 부분은 금방 다 끝나는데 ㅠㅠ
제발 좀 도와주세요 부탁드릴께요 ㅠㅠ
매번 너무 여러운 부탁만 드려서 정말 죄송합니다.ㅠㅠ
요즘 날씨가 많이 쌀쌀해지기도 하고, 신종플루때문에 다들 걱정이 많은데
건강 조심하시기 바랍니다..^^;; 감기 조심.. 신종플루 조심!!;;;
예 댓글은 보았는데요 제가 처리해드리기는 쉽지 않겠네요.
일단 개발환경도 제가 전혀 모르고 있고요 디비에서 데이터를 가져오는 것 너무 다양하게 작성할 수 있기 때문에 소스를 작성해 주기는 약간 어렵습니다.
그동안의 댓글로도 보면 초기부터 디비얘기를 하시고 계셨고 저는 디비부분에 대해서는 딱히 답변은 안드리는 모양새였는데요 제가 막연히 느끼기에는 디비에서 가져온 데이터랑 자바스크립트와의 연동에서 약간 잘못생각하고 계신가하는 생각이 듭니다. 디테일한 얘기를 한것은 아니기 때문에 어디가 잘못됐다 말씀드리는 것은 아닌데 질문의 내용으로보아서는 그렇게 느껴졌습니다.
지금 정확히 어느 부분이 안되는지도 제가 모르고 있기는 한데요. 문제를 해결하실때 너무 답답해 하지 마시고 하나하나 찬찬히 보시면 좀 낫지 않나 생각합니다. 소스는 거의 비슷하다고 하셨으니 디비는 아예 생각하지 마시고 자바스크립트로 스트링("out_1^out_3^out_2")을 지정해서 주었을 때 위젯이 정확하게 동작을 해야 합니다. 이게 동작하지 않는다면 자바스크립트 구현에서 잘못된 것이지요.
JS만으로는 동작을 잘한다면 이제 디비에서 위의 스트링("out_1^out_3^out_2")을 디비에서 가져온 값으로 교체해 주어야 합니다.(디비에는 테스트값을 입력해 놓으시면 편하실겁니다.) 디비에 쿼리해서 값을 가져오는 것을 알고 계실테니 디비에서 "out_1^out_3^out_2"스트링을 가져와서(순서는 달라지겠죠.) JS의 해당위치에 스크립틀릿으로 값을 넣어주시면 됩니다. 서버언어로 값만 동적으로 지정한 것이기 때문에 형식만 동일하다면 당연히 돌아가야 합니다. JS부분은 앞에서 확인했으므로 안돌아간다면 디비에서 값을 가져온 형식이 달라진 것이겠고 이것은 웹브라우져에서 소스보기로 보시면 디비에서 뽑아온값이 원하는 형태로 전달되었는지 확인할 수 있습니다.
여기서도 잘 된다면 이제는 값이 바뀔때마다 위젯의 순서를 뽑아올 데이터와 똑같은 형식으로 만들어서 디비에 인서트하기만 하면 됩니다.
제가 문제를 접근하는 방법이이라 재경님께도 맞을지는 모르겠지만 한꺼번에 해결하려하지 마시고 하나하나 띄어내어서 확인하시면 어느부분에서 문제가 발생하는 것이지 확인할 수 있지 않을까 합니다.
아.. 답변 감사합니다..;;
지금 천천히 하고 있는데도 잘 안되네요..
그래도 끝까지 해봐야죠.. 뭐;;
아;; 근데 갑자기 안되는게 한가지 있는데 하나만 물어봐도 될까요?
function aa(){
var ccc = sortable.serialize('container1');
}
<%=
String str ;
------------DB 연동부분 ---------
%>
이렇케 코드가 구성되어 있습니다.
Sortable.serialize() 를 이용하여 추출한 정보를 var Type 의 변수에 저장했는데..
이 부분을 어떻게 다시 JAVA의 String 변수에 저장할수 있을까요?
보통 textAram 에 있는 내용은 request.getParameter() 을 이용해서 받으면
쉽게 되는데 이건;; 이상하게 잘 안되네요..
간단한 방법있으면 좀 알려주시면 안될까요?
이후~;; jsp 는 너무 어려운거 같네요..ㅠㅠ
그냥 닷넷이나... C#으로 어플리케이션 만들껄 그랬나? ㅠㅠ
을 이용해서 컨테이너의 정보를 추출했습니다
디비 연동부분은 자바스크립트랑 혼동을 하고 계신것 같은데 자바스크립트는 클라이언트쪽이고 디비는 서버쪽입니다. 톰캣이 돌아갈때 서버가 먼저 돌아가고 해석된 값이 클라이언트로 떨어지기 때문에 클라이언트쪽인 자바스크립트의 변수를 자바의 스트링에 넣을 수는 없습니다.
클라이언트에서 서버로 값을 보내려면 GET이나 POST로 서버로 날려야 합니다. Textarea의 값은 form submit으로 서버로 전송시켜서 서버에서 request.getParameter()로 받는 것입니다. serialize()는 자바스크립트변수로 받은것이기 때문에 이걸 서버로 전송해야 하는데 form을 하나 만들서 input hidden에 값을 넣어서 form.submit()으로 전송을 하셔도 되고 Ajax로 전송을 하셔도 됩니다.
당연히 전송하는 페이지는 값을 받아서 디비에 저장을 하는 페이지여야 하고요. 자바스크립트로 받아서 헷갈리신것 같은데 Ajax를 잘 모르신다면 form을 만들어서 submit()하시는게 제일 편하신 방법일것 같습니다.
안녕하세요..; 오늘 글을 많이 올리게 되네요.
너무 귀찮게 해드려서 답변 안해주시는건 아닐까 걱정되네요..ㅠㅠ
아직 DB 연동해서 하는건 안됫는데 님의 말씀데로 차례차례 해보니깐 조금씩 길이 보여갑니다.
그런데 두가지 문제가 발생해서 이렇게 글을 올립니다.
var widjetTpl = new Template(
'<div id="#{id}" class="widjet">' +
'<div class="handler">#{title}</div><div class="content">#{content}</div>' +
'</div>'
);
<div id="#{id}" 의 {} 에서 오류가 발생하여 톰겟에 연결이 되지 않는 오류가 떴씁니다.
혹시나해서 {} 를 없에고 실행 해보니. 톰켓이 실행 되면서 id 값을 받아 오지는 못했지만
#id 값이 출력이 되는것을 볼수 있었습니다. 위의 소스에서 {} 가 들어가면 실행이 되지 않는데 그 이유가 뭔가요? 만약 정상적으로 작동하게 하기 위해선 어떻게 해야 할까요?
그리고
document.observe('dom:loaded', function() {
"out_1^out_3^out_2".split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
observe와 each 에서 계속 에러메시지의 빨간 줄이 생깁니다;;
아무리 인터넷을 찾아보고 해도 왜 에러메시지의 빨간 줄이 생기는지 알수가 없습니다;
전 eclipse 를 사용하고 톰켓 6.0을 사용하고 있습니다;
정말 귀찮으시겠지만..;; 이 에러메시지에 대해서 간략하게 답변 달아주시면 안될까요?
항상 답변 달아주셔서 정말 감사합니다.
이제 곧 해결이 될듯 하니 너무 기분이 좋으네요.. 하하;;
그럼 이만 글 줄이도록 하겠습니다;;
ㅎㅎ 그런건 아니고요. 저도 계속 보고 있는 것은 아니라서요...
흠... 톰켓에서 테스트를 따로 돌려보진 않았는데 {}부분이 딱히 문제가 있을것 같지는 않은데 환경에 따라 여러가지 상황이 있을 수 있으니 어떤문제때문에 발생한 것인지는 잘 모르겠습니다.JS부분을 외부 JS파일로 하셔도 똑같은 문제가 발생하나요? 톰캣에러라면 톰캣이 구문해석을 하면서 어떤 문제가 생긴것 같은데 외부JS파일로 빼내면 괜찮지 않을까하는 생각이 듭니다.
observe와 each는 동작이 안한다는 말씀이신가요? 아니면 동작은 되는데 이클립스에서 빨간 줄이 생긴다는 말씀이신가요? 만약 후자라면 이 기능들은 JS의 본연의 기능이 아니라 prototype.js에서 지원하는 기능인데요 이클립스의 버전은 정확히 모르겠지만 3.4이상이시라면 이클립스에서 JS를 JSDT가 지원하고 있는데 외부JS를 불러온 부분의 펑션까지는 따로 검색해서 문법체크는 해주지 않기 때문에 이클립스의 입장에서는 모르는 문법이기 때문에 빨간줄이 나오는 것입니다. 동작에 문제가 없다면 무시하셔도 좋습니다.(개발할때 좀 신경쓰이긴 하죠. JSDT설정을 통해서 해결할 수는 있을건데 그부분은 저도 정확히 안해봐서요.)
만약 동작을 안한다면 prototype.js를 못불러오셨거나 다른 사용상의 문제가 있지 않은가 싶습니다.
잘 해결되셨으면 좋겠네요. ^^
아;;; 답변 감사 합니다..
역시... 첫번째 답변에서 post 로 보내야 하는건 아닐까 생각은 했었는데
좀더 간단한 방법이 있지 않을까 했었는데 ㅠㅠ 역시 없군요..
두번째 질문에선 톰켓에서 #{} 형식이 맞지 않다고 나왔습니다. ㅠㅠ
이거 해결 방법이 없을까요? 정말 이클립스 3.4로 변경을 해야 하는건지;; 아후~;;ㅋㅋ
많이 복잡하네요..ㅠㅠ
이클립스 버전은 3.41로 확인 했습니다..;;;
이부분만 해결하면 이제 거의 다 끝낼수 있을텐데.. 톰켓 버전이 낮아서 그럴수도 있는건지..
분명 님이 작성해주신데로 하니 돌아가긴가는데..
왜 #{} 형식이 맞지 않는다는건지..ㅠㅠ
그리고 에러메시지 표시가 되는 빨간줄은.. 일딴 문제 없이 돌아 갑니다.
다만 #{} 가 문제가 되니 혹시나 each 에서 문제가 발생한건 아닐까 생각 했었는데 그건 아닌듯합니다.
왜냐면 #을 빼고 {id}로 했을때 정상적으로 돌아 가서
out_1 의 값이 아닌 {id}의 값이 화면에 출력 되는걸 볼수 있었거든요..;;
이궁~;; #{}이게 잘 못 된건데 이건 어떻게 알야 봐야 할지 감도 안오네요..ㅠㅠ 이거 하나면 모든게 오케이 되는데..;; ㅠㅠ 방법이 없을까요?
일딴 js 파일로 분리 해서 해봐도 되지 않아요 ㅠㅠ
그리고 한가지더 문제점을 발견하게 되었네요..ㅠㅠ
#{}의 문제로 정상적인 title값이나 id 값을 받아오지 못했지만 <div class="handler">#{title}</div>'가 있기 때문에 ;; handler 는정상 작동해야 하지 않는가요?
위젯이 고정이 되어버렸네요;;
var dragoption = {
tag:'div',
handle: 'handler',
only: 'widjet',
overlap: 'vertical',
constraint: false,
containment:['container1', 'container2', 'container3', 'container4'],
dropOnEmpty: true,
delay: 10,
scroll: window,
onUpdate: function(tab) {
if ($("dummyDestinationDiv")) {
$("dummyDestinationDiv").remove();
}
showMessage();
},
onChange: function(elem) {
if ($("dummyDestinationDiv")) {
$("dummyDestinationDiv").remove();
}
elem.insert({before:'<div id="dummyDestinationDiv" class="dummyDestinationStyle" style="width:'+(elem.getWidth()-7)+'px; height:'+(elem.getHeight())+'px;"></div>'});
}
};
var widjetList = [
{tilte:'Test 1', id:'out_1', content:'내용....'},
{tilte:'Test 2', id:'out_2', content:'내용....'},
{tilte:'Test 3', id:'out_3', content:'내용....'},
{tilte:'Test 4', id:'out_4', content:'내용....'},
{tilte:'Test 5', id:'out_5', content:'내용....'},
{tilte:'Test 6', id:'out_6', content:'내용....'},
{tilte:'Test 7', id:'out_7', content:'내용....'},
{tilte:'Test 8', id:'out_8', content:'내용....'},
{tilte:'Test 9', id:'out_9', content:'내용....'}
];
var widjetTpl = new Template('<div id="#{id}" class="widjet">'+
'<div class="handler">#{title}</div>'+
'<div class="content">#{content}</div>'+
'<div>');
function getWidget(wd){
var result;
widjetList.each(function(par){
if(par.id == wd){
result=widjetTpl.evaluate(par);
}
});
return result;
}
function showMessage() {
$("message").update("container1 : " + Sortable.serialize('container1')+
"<br>container2 : " + Sortable.serialize('container2')+
"<br>container3 : " + Sortable.serialize('container3')+
"<br>container4 : " + Sortable.serialize('container4'));
}
document.observe('dom:loaded', function(){
Sortable.create('container1', dragoption);
"out_1^out_3^out_2^out_4".split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
});
Sortable.create('container2', dragoption);
Sortable.create('container3', dragoption);
Sortable.create('container4', dragoption);
});
이건데;; 혹시 잘못된거라도 있는지 봐주실수 있는지.. 일단 전에 말씀 드렸드시 님의 예제와 거의 같습니다;;;;;
혹시 확인 해주실수 있는지..;;;; handler 로 지정되어 있으므로 작동 되야 할 것 같은데;; ㅠㅠ
산넘어 산이네요..;; #{} 이것 때문에 안되는거라면 좋을것 같은데.. 그렇다면 이것만 해결하면 될테니깐요.. 벌써 4시반이네요..ㅠㅠ
정말 힘드네요^^:; 해결이 될듯 하면서 안되니^^;; 하하;;
주신 소스로 테스트를 해보았는데요.
일단 톰캣에서 #{}에 문제가 생기는건 이유를 정확히 모르겠습니다. 제가 해보니 주신 스크립트를 모두 외부JS로 빼니까 동작하는데 문제가 없었습니다.
<script src="script.js"></script>
이런식으로 스크립트부분을 모두 js파일로 빼시고 다시 해보시면 될것 같습니다.
그리고 handler부분은 확인해 보니 widjetList부분에 오타가 있으셨더군요. title부분에 오타가 있어서 handler DIV의 내용이 없어서 핸들러가 동작 안한것이었습니다. tilte을 title로 고쳐주세요.
그리고 sortable.create는 현재 container안에 있는 엘리먼트에 드래드앤 드롭을 가능하게 합니다. 그러므로
"out_1^out_3^out_2^out_4".split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
});
Sortable.create('container1', dragoption);
아래처럼 Sortable.create가 widget을 넣는코드 다음에 나타나야 새로 넣은 엘리먼트가 드래드앤 드롭이 가능해집니다. 추가로 위젯이 들어간다면 다시 Sortable.create을 다시해주셔야 합니다.
안녕하세요.. 답변 정말 감사 합니다^^;;
점점 문제의 해결이 되어 가는거 같아서 너무 좋네요..
아;; 오타로 인해서 ^^;; 안된것도 못보고.. 하하;;;
몇일 잠을 자지 못했더니 눈에 뭔가 잘 안들어 오는거 같네요..
그리고 질문이 하나 더 있습니다.
js 파일로 만들어서 외부에서 불러 오는거 말인데요..
<script src="./abced.js"></script> 로 했을 경우..
js 파일의 내용을 사용하려면 function() 의 함수를 호출 해야 가능 하잖아요.
어떻게 드래그엔 드랍 하는 부분을 호출 할 수가 있을까요?
보통 객체를 생성해서 사용했는데 이건 ;;
조금 해깔리네요;;
죄송하지만 좀 알려주시면 안될까요?
이것만 해결하면 DB 연동문제면 끝나는데
DB연동하는 것도 POST 로 값을 넘겨 받는것만 구현하면 끝이거든요..
이부분은 뭐..;; 금방 해결 할수 있을것 같아요 이젠..ㅋㅋ
그리곤 디자인부분만 조금 손보면 끝^^
님의 도움이 정말 많이 컸네요.
정말 감사 드려요!!! ㅎㅎㅎ
아~ 답변 꼭좀 부탁드릴께요!! 정말 감사합니다.
정확히 질문의 요지를 잘 이해못하겠습니다.
작성해 주신 JS소스를 그냥 abcde.js파일에 복사해 넣으신다음 불러오시면 됩니다. 외부js와 HTML head부분에
<script type="test/javascript>
//js소스
</script>
로 작성하신 것과 사용상의 차이는 없습니다.
document.observe같은 경우만 해당 문서랑 결합도가 큰데요. 여태 내용으로 보면 여러페이지로 구성된건 아닌것 같아서 이부분도 포함해서 js파일로 넣으셔도 되고 아니면 document.observe만 인라인으로 넣으셔도 됩니다.
외부 js 파일로 분리 하였습니당.
;; abcde.js 파일에 js소스를 복사해서 저장 하였구욤..;;
불러 왔는데 실행이 되지 안네요.
제가 잘못 작성한건지..;; 간단히 불러오는 방법좀...;;;;
<script type="text/javascript" src="/abcd.js"></script>
을 이용하여 불러오기 했는데..;;
왜 안되는거죠? 하나 해결될것 같으면 하나가 안되고.. 왜 이런거죠? ㅠㅠ 정말 ㅠㅠ
그렇게만으로는 이유를 알기가 어렵고요...
/abcd.js를 URL로 불러보세요. 페이지가 나오는지요. 톰캣으로 일반적으로 하시면 localhost/프로젝트이름/abcd.js 가 될것 같은데요. 저렇게 부르면 localhost/abcd.js 이고요.. 그문제는 아니신지
안녕하세요... ;;
추석은 잘 지내셨는지요?
훔... 아직 해결하지 못하여 이렇게 또 글을 남기게 되네요..
이젠 질문하기도 죄송하고 부끄럽네요..
이후 ~ 먼저 톰켓 오류 때문에 톰켓을 최신버전으로 바꾸어보아도 해결이 되지 않네요..
님이 말씀하신데로 외부 js 을 만들어서 해도 되지 않네요..
먼저..
abcd.js 파일을 만들었습니다.
var widjetList = [
{title:'Test 1', id:'out_1', content:'내용....'},
{title:'Test 2', id:'out_2', content:'내용....'},
{title:'Test 3', id:'out_3', content:'내용....'},
{title:'Test 4', id:'out_4', content:'내용....'}
];
var widjetTpl = new Template(
'<div id="{id}" class="widjet">' +
'<div class="handler">{title}</div><div class="content">{content}</div>' +
'</div>'
);
function getWidget(wd) {
var result;
widjetList.each(function(par) {
if(par.id == wd) {
result = widjetTpl.evaluate(par);
}
});
return result;
}
그리고 메인에선
var aa = "out_1^out_3^out_2";
document.observe('dom:loaded', function() {
aa.split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
})
Sortable.create('container1', dragoption);
Sortable.create('container2', dragoption);
Sortable.create('container3', dragoption);
Sortable.create('container4', dragoption);
});
이렇게 하였습니다.
그런데 오류가 발생하는건
document.observe('dom:loaded', function() {
aa.split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
})
이부분에서 런타임오류가 발생하네요..
개체가 필요한다고..
죄송하지만 다시한번만 봐주시면 안될까요?
부탁드리겠습니다.
뭐가 잘못 된건지.. 좀....
참고로..
메인에선
<script type="text/javascript" src="./abcd.js"></script>
을 이용하여 추가 해주었습니다.
또 getwidjet 부분에서 빨간줄이 끄입니다.
휴... 일단 abcd.js 파일을 읽어 오는지확인하기 위하여
alert() 를 이용하여 문장을 출력해봤는데
출력이 되는것을 보았습니다. ㅠㅠ
부탁 드리겠습니다. 이후... 원하신다면 제가 작성한거 전부 보내 드릴수도 있습니다.
ㅠㅠ
아;;; 위에 내용을 보시고.. 간단히 해결책이나.. 잘못된 코드가 있으면..
간단히 수정좀.. 부탁드릴께요..ㅠㅠ
아무래도
document.observe('dom:loaded', function() {
aa.split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
})
Sortable.create('container1', dragoption);
여기에서 오류가 뜬거 같은데 ㅠㅠ 정말 미치겠습니다.
document.observe 중에서 observe 에서 빨간줄도 뜨고..ㅠㅠ
아무래도 여기서 문제가 되는거 같은뎅 ㅠㅠ
부탁드리겠습니다.
일단 alert가 떴으니 abcd.js는 정상적으로 작동된것 같습니다. 외부의 function까지 이클립스가 인식못하니 빨간줄은 그냥 무시하셔도 될듯하고요..
widjetTpl에서 #{}에서 #을 지우셨는데 abcd.js로 해도 해당부분에서 톰캣오류가 나타나나요? js파일이라서 괜찮을것 같은데요.
document.observe('dom:loaded', function() {
aa.split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
})
에서 런타임오류가 나타난다고 하셨는데 어떤 런타임오류인가요? 위에도 말씀드렸지만 observe같은 부분에서 빨
답변 감사 드립니다.. 일단..
메인에서
document.observe('dom:loaded', function() {
aa.split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
})
Sortable.create('container1', dragoption);
getWidget 에 빨간줄이 끄이고 실행이 되지 않습니다.
widjetTpl에서 #{}에서 #을 지우셨는데 abcd.js로 해도 해당부분에서 톰캣오류가 나타나나요? js파일이라서 괜찮을것 같은데요
이 질문에서 일단.. widjetTpl 이 실행되지 않는것으로 추정 됩니다.
왜냐 하면
#{} 을 지우고 했지만.. 일단 위젯이 생성되지 않고...
컨테이너 2에 임시적으로 만들어 둔 위젯들도 드래그앤드랍이 되지 않는 현상이 발생했습니다
그러다가
혹시나 해서
getwidjet 구현 펑션을 메인에 작성해서 해보기도 하였지만...
이땐 widjetList 가 정의 되지 않았다고 뜹니다.
톰켓에서만 작동되면 되는데 왜 #{} 가 되지 않는건지 알수가 없습니다.
ㅠㅠ 일딴 외부 js 파일은 불러와 정상적으로 사용이 가능 한데..
아무래도 드래그엔 드랍이 되지 않는걸 보아 하니..
document.observe('dom:loaded', function() {
aa.split("^").each(function(arg) {
$("container1").insert(getWidget(arg));
})
Sortable.create('container1', dragoption);
여기에서 오류가 뜹니다.
런타입 오류라고 뜨고
개체가 필요하다고 뜹니다.
해결책이 없을까요?
이메세지가 뜨고는 드래그앤 드랍이 실행되지 않고
컨테이너 1 에는 아무런 위젯이 생성되지 않습니다.
일단 정확히 어디서 부터 안되는 것인지 제가 알기가 어렵습니다.
런타임오류라고 말씀하신것이 톰캣서버 실행하신 다음에 메시지가 나온다는 말씀이신가요?
정확한 이유를 알려면 소스를 테스트해보아야 하는데요. 저번에 확인하면서 만들었던 소스가 있는데 메일주소 주시면 소스 보내드리도록 하겠습니다.
디비나 서버쪽은 없고 html, js만 있습니다.
아 정말 감사 합니다!!!!!
darkstarjjk@nate.com 입니다.
디비 연동하는 부분은 이부분만 해결하면.. 금방 할수 있을 것 같습니다.
그래서 걱정이 안되는데
이부분만 해결하면 될듯 합니다.
부탁드리겠습니다. 소스 보내주시면 바로 해결하고..
어떤부분이 문제가 된건지 글 올리도록 할께요..
정말 감사합니다.
메일 보내드렸습니다.
안녕하세욤~; 여기 글남기면 엄청 친절히 글을 남겨주시는거 같아서 저도 질문 하나 하려구요;
괜찮은거 맞나요?
지금 껏 님이 올려주신 자료를 보면서 동적인 홈페이지를 만들고 있었는데욤;
Template 객체에 대해서 잘 몰라서요;
님이 재경님에게 알려주신 방식으로
wdigetList 를 만들고 이 widgetList 를 Template 으로 넘기면서
id, title, content 등을 분리 해봤습니다.
그런데 content 에 있는 값이 스크립트 언어이면 인식이 되지 않는거 같아서요
구글 아이에서 제공 해주는 가젯을 스크립트 언어 형식으로 제공 해주길래 그걸 추가 해서 프로그램을 돌려보니
content 부분에는 아무것도 출력이 되지 않네요 ㅋㅋㅋ
님이 제공해주신 소스를 거의 응용해서 만든건데 혹시 아시나요?
tmeplate 객체가 문제인건지
var widjetTpl = new Template('<div id="#{id}" class="widjet">'+
'<div class="handler">#{title}</div>'+
'<div class="content">#{content}</div>'+
'<div>');
여기에서 #{conent}의 내용을 읽지 못해요 ㅋ
이부분이 스트립트 형식의 주소가 들어가요. 간단한 예제를 올리면;; 다음과 같아요
var widjetList = [
{id:'out_01', widget_name:"", title:'Test 3', content:'<script src="http://www.gmodules.com/ig/ifr?url=http://gtx.helizet.com/2675/movies_google_co_kr_ig_5a7b2d52.xml&synd=open&w=250&h=360&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>'},
];
var widjetTpl = new Template('<div id="#{id}" class="widjet">'+
'<div class="handler">#{title}</div>'+
'<div class="content">#{content}</div>'+
'<div>');
ㅋㅋ 여기에서 #{content} 이부분이 동작하지 않는걸로 보입니다.
실제로 widgetList 의 content :"" <~~ 부분에 텍스트나 html 문장이 드어가면 작동 되는데
스크립트 언어가 들어가면 작동이 안되욤!
아시면 답변좀 해주세욤!;
부탁드릴께요^^;;
예 괜찮은데요.
테스트를 좀 해봤는데 쉽사리 해결책이 안나오네요. 일단 코드에 문제가 있어서 돌아가지 않습니다. 저런식으로 작성할 경우 </script>부분에서 스크립트가 종료된 것으로 판단되기 때문에 오류가 납니다.
</" + "script>"처럼 끊어주던지 <\/script>로 해주셔야 합니다.
그리고 실제로는 저런식으로 삽입해도 script가 실행이 되지 않습니다. 아마 prototype이 이스케이프를 할 것 같고요 innerHTML로 해도 추가는되도 실행이 안됩니다.
크로스도메인 문제를 해결한 Ajax로 페이지소스를 가져오던지 서버사이드쪽과 연계해서 해야될 부분같습니다.
이것저것 찾아봤는데 딱히 script태그를 추가하는 방식으로는 해결책이 잘 안보이네요.
죄송.
안녕하세요?
이 소스를 공부하다가 궁금한 점이 있어서 댓글 남겼습니다~
예제로 올려놓으신 소스 기본구조로 이것저것 하다가 익스플로어 창
사이즈를 변경하니 container의 위치가 자동으로 변하던데 이걸 고정할순 없을까요?
답변 부탁드려요~
그건 스타일의 문제인데요.
2개의 컨테이너를 모두 감싸는 div을 하나 주시고 width를 2개를 모두 포함할 수 있게 충분히 크게 주세요.
질문 하나 더 드릴게 있습니다.
정렬을 만약 옆으로 하고 싶으면 어떻게 해야 하나요?
그부분도 CSS의 문제인데요
배치를 가로로 배치하면 됩니다. div의 특성상 기본으로 block속성을 가지고 있어서 세로로 떨어지는 것이고요 float:left를 주신다거나 li를 써서 메뉴처럼 가로로 메치하고 소터블을 주시면 됩니다.
관리자만 볼 수 있는 댓글입니다.
제가 비밀글로 올려버려서 잘못된것 같습니다. 다시한번 올립니다.
설명해주신 내용 너무 감사드립니다.
질문이 있어서 글 남겨놓습니다.
아웃사이더님께서 설명해주신 소스를 응용하여
드레그엔드롭기능이 있는 축적형태의 자를 만들려고 합니다.
네이버에 보시면 네이버 지도에 있는 자형태를요.^^
url
http://dev4.ubist.com/statistics/MyJsp1.jsp
우선 설명해주신 디자인을 좀 변경하였고, 컨테이너를 13개 만들어서
드레그앤 드롭으로 축적을 나타내는 부분이 이동 가능하도록 만들려고 하고 있습니다.
문제는 제가 제일 하단에 있는 이미지 버튼을 누를때의 이벤트에 컨테이너1번에 있던 내부 div를 컨테이너13번 내부로 옮기고 싶다는 것입니다.
그냥 div내부 객체 전부를 지우고 다른곳에 생성하게된다면 드레그엔 드롭부분에서 리턴받던 함수 번호를 인식 못하여 곤란해 질것 같습니다.
버튼에 어떤식으로 함수를 실행하면 컨테이너 1번에서 13번으로 드래그앤드롭한 효과와 같을까요?
out_1 div가 13번컨테이너로 이동한것 처럼 하면 되는건가요?
$("container13").update($("out_1"))
showMessage();
버튼클릭할 때 위와같이 하면 안될까요?
옮겨가고 그 이후에도 동작하기는 하는데 원하는 대로 되신 것인지 잘 모르겠네요. ^^
와 너무 감사드립니다..ㅠ_ㅠ
덕분에 좋은 공부하내요.
아직도 멀었다는 생각이 막 갑자기 드네요.
더 열심히 해서 사이더님보다 많이 알테야..+_+
^^ 잘 해결되셨나 보네요 ㅎ
저도 뭐 잘 모르는데요.. ㅎㅎㅎ 그냥 좀 먼저한것 뿐이죠 ㅎ
음....한가지만 더 여쭙겠습니다.
아무리 찾아봐두 스크립트에 $가 뜻하는 것이 무엇인지 안나와서요.
구문중에 $로 시작하는 구문이 많은데 $는 어떤 문자인지요?
$는 자바스크립트에 존재하는 구문은 아닙니다. 여기서 $는 prototype.js에서 제공하는 축약기능입니다. 자바스크립트를 사용하면 가장 많이 사용하게 되는 document.getElementById의 축약형태라고 보시면 됩니다.
document.getElementById("test")라고 쓰는게 번거로우니까 $("test")라고 쓰는거죠. 간단하게는 이렇게 보시면 되고 실제로는 prototype.js의 메서드들을 사용하기 위해서 추가적인 기능이 좀 더 들어갑니다. $("test")하면 프로토타입의 객체가 되어서 부가적인 기능들을 사용할 수 있게 되죠.
$라는 축약형태는 아주 획기적인 발상이었기 때문에 대부분의 자바스크립트 프레임워크에서 채용하고 있습니다. jQuery에서는 $가 css 셀렉터로 jquery객체를 만드는 역할을 하고 있습니다.
좋은 정보 감사합니다 정말 큰 도움이 되었습니다 ^^
즐거운 금요일 오후 되셔요 ^^
ㅎㅎ 감사합니다.
즐거운 주말되세요. ^^
좋은 참고가 되었습니다. 감사합니다 ^^
저도 댓글 감사드립니다. ^^
예제 잘 보았습니다.
저는 지금 스케줄 달력 제작중이고요
예제상에서는 움직임이 좋은데
막상 제가 쓰면서 한 30개정도 Create 하고
td 안에 container를 삽입하여 쓰고 있는데
마우스를 놨는데도 안움직일때가 있네요.
이게 왜 그런지 모르겠습니다;
저도 그렇게 크게까지는 안만들어보았는데요.
말씀해주신 내용만으로 보면 많은 객체로 인한 성능문제이거나 아니면 여러개의 객체중에서 충돌이 발생하지 않았나 싶습니다. 어떤 브라우저 쓰시는지 모르겠지만 크롬이나 사파리등으로 테스트 해보시고 최적화 및 디버깅을 해보셔야 할듯 합니다.
벤치마킹은 안해봤지만 스크립타큘러스가 나온지도 좀 됐기 때문에 아주 가벼운 라이브러리는 아닌걸로 알고 있습니다.
안녕하세요. 오랫만에 뵙내요. 저번에 드래그앤 드롭 너무 도움받아서 감사드렸습니다.
한가지 더 궁금한것이 있습니다.
지금 이 드래그앤 드롭을 익스플로러에서 실행할시에
퍼포먼스 문제인것 같은데 마우스를 DOWN하고 오랜시간 있지 않으면
객체가 선택이 안되는 문제가 있습니다.
그래서 해당 container가 마우스를 놓은 상태에서도 따라다니다가
마우스를 다시 다운시키면 해당 위치로 이동하게 되는데요.
아마도 마우스 다운시 이벤트 객체가 인식하는데 시간이 좀 걸리는것 같습니다.
퍼포먼스 향상을 위해서 제가 어떤점을 노력해야 할까요...ㅠ_ㅠ
아무래도 드래그앤드롭은 비용이 드는 작업이고 IE의 JS엔진 성능이 많이 떨어지기 때문에 그런 문제가 있을수 있을듯 합니다.
스크립타큘러스 자체는 손대기가 좀 어려우니까요 그 외적인 부분에 대해서 튜닝작업을 최대한 하셔야 할것 같은데요 퍼포먼스 튜닝은 딱 어떻다라고 말씀드리기는 어려워서요... 검색해 보시면 관련글들이 꽤 나올테니까 참고하셔서 그런 강좌들에서 하지말라는 내용들은 튜닝하시면 도리듯합니다.
답변 감사합니다..^^ 즐거운 하루 되세요.
sortable를 빼서 드래그엔 드롭 기능을 구성하기로 했습니다...ㅎㅎ
많은 도움 감사드려요!!!
아무래도 좀 오래된 라이브러리가 퍼포먼스가 아주 좋지는 못할겁니다. 결국 기능을 빼서 추가하셨군요.... 현재 개발중인 scripty2가 나오면 훨 빠를것 같긴 한데요.. ㅎㅎㅎ
수고하세요~ ㅎ
좋은 자료 와 예제를 올려주시는 덕분에 많이 배우고갑니다.
드래그엔 드롭 구현시
DIV UL LI 테그는 먹히는데
TABLE TR TD 테그는 먹히지가 안네요.. 이유를 알수 있을가요??
흠.. 테스트를 해보지 않아서 정확치는 않지만 HTML에는 block level elements라는게 있는데 거기에만 적용이 될겁니다. block level아니면 핸들링 하기가 어려워서요.(위 대로라면 table은 되어야 맞기는 한데 다른 스타일로 Block 레벨이 아닐수도 있어서요.. ㅡㅡ;;)
block로 지정하시고 해보세요...
아 그렇군요. 빠른 답변 고맙습니다. 하다가 잘 안대면 다시 한번 물어볼게요, ㅎㅎ
또배워갑니다~^^ 슝~
말씀하신대로 DIV TABLE 이거 둘다 Black level element인데 어떻하죠??;;
제가 이상하케 한건가요.. 이벤트가 안먹히네요 ㅠ
그러게요...
상황상 스타일이 다르게 먹었을 수도 있고... 아니면 테스트를 해봐야 알것 같습니다. div로 감싸서 사용하면 안되는건가요? 보통 이런거에서 테이블은(특히 tr, td)는 좀 다르기 때문에 애니메이션으로 다룰때는 잘 안쓰게 되더군요.
안녕하세요.. 혹시 아직관리 하시나요 .. ? 질문이 생겨서 문의드립니다 .^^
prototype.js와 scriptaculous는 이젠 시대가 지난 라이브러리가 지금은 쓰고 있지 않습니다.