jQuery 플러그인을 통해 링크/페이지를 드래그 앤 드롭하는 방법은 무엇입니까?

Question

안녕하세요 저는 사용자가 위키피디아의 링크/웹 페이지, 특히 기사를 Solitaire의 스택과 같은 일종의 'Organizer'로 드래그 앤 드롭 할 수 있도록 jQuery UI를 만드는 데 자체 프로젝트를하고 있습니다. 사용자가 항목/카드 비주얼을 그룹화하는 것과 같은 Wikipage를 UI로 끌어다 놓을 때와 같은 다양한 기능을 추가하기를 희망합니다.

jQuery에 비교적 익숙하지 않아 어디에서 시작해야할지 모르겠습니다. Wikipedia에서 페이지를 드래그하여 jQuery UI에 드롭 할 수 있습니까? 누구라도 조언을한다면, 나는이 일을 어떻게 끝내야 하는지를 실제로 밝혀 내고있는 중 굉장 할 것입니다.

---

편집 : 아무나? 나는 아직 아무것도 찾지 못했다.

Answer 1

편집 2 :

내가 순수한 JS 양식이 재 작성 (또한 몇 가지 문제를 해결합니다).

요점 : https://gist.github.com/matt-curtis/9044134

JSFiddle : http://jsfiddle.net/z9Y86/1/

코드 :

var LinkGrabber = { 
    textarea: null, 

    /* Textarea Management */ 

    attach_ta: function(){ 
     if(LinkGrabber.textarea != null) return; 

     var textarea = LinkGrabber.textarea = document.createElement("textarea"); 
     textarea.setAttribute("style", "position: fixed; width: 100%; margin: 0; top: 0; bottom: 0; right: 0; left: 0; z-index: 99999999"); 
     textarea.style.opacity = "0.000000000000000001"; 

     var body = document.getElementsByTagName("body")[0]; 
     body.appendChild(textarea); 

     textarea.oninput = LinkGrabber.evt_got_link; 
    }, 

    detach_ta: function(){ 
     if(LinkGrabber.textarea == null) return; 
     var textarea = LinkGrabber.textarea; 

     textarea.parentNode.removeChild(textarea); 
     LinkGrabber.textarea = null; 
    }, 

    /* Event Handlers */ 

    evt_drag_over: function(){ 
     LinkGrabber.attach_ta(); //Create TA overlay 
    }, 

    evt_got_link: function(){ 
     /* THIS IS WHERE WE HANDLE THE RECEIVED LINK */ 

     var link = LinkGrabber.textarea.value; 

     alert(link); 

     LinkGrabber.detach_ta(); 
    }, 

    evt_drag_out: function(e){ 
     if(e.target == LinkGrabber.textarea) LinkGrabber.detach_ta(); 
    }, 

    /* Start/Stop */ 

    start: function(){ 
     document.addEventListener("dragover", LinkGrabber.evt_drag_over, false); 
     document.addEventListener("dragenter", LinkGrabber.evt_drag_over, false); 

     document.addEventListener("mouseup", LinkGrabber.evt_drag_out, false); 
     document.addEventListener("dragleave", LinkGrabber.evt_drag_out, false); 
    }, 

    stop: function(){ 
     document.removeEventListener("dragover", LinkGrabber.evt_drag_over); 
     document.removeEventListener("dragenter", LinkGrabber.evt_drag_over); 

     document.removeEventListener("mouseup", LinkGrabber.evt_drag_out); 
     document.removeEventListener("dragleave", LinkGrabber.evt_drag_out); 

     LinkGrabber.detach_ta(); 
    } 
}; 

원래 답변 : 내가 생각할 수있는 유일한 해결 방안은 무엇인가를하는 것입니다

를 사용하는 입력 및 텍스트 영역에 삭제 된 링크의 링크가 텍스트로 수신되므로 삭제 된 앵커의 링크를 가져 오는 입력 또는 텍스트 영역이 있습니다.

HTML :

<textarea id="link_grabber"></textarea> 
<div id="notice">Drop a link on me! :)</div> 

JS : http://jsfiddle.net/C8yAa/2/

편집 :

$("body").bind("dragenter dragover", function(){ 
    //When the user has dragged a link into the document... 
}).bind("dragleave dragexit", function(){ 
    //When the drag is moved outside the document... 
}); 

setInterval(function(){ 
    if($("#link_grabber").val() != ""){ 
     var val = $("#link_grabber").val(); //Get the newly dropped link 
     $("#link_grabber").val(""); //prep textarea for the next link 
     $("#notice > span").text("Your link is: "+val); 
    } 
}, 100);​ 

나는 개념을 보여줍니다 jsFiddle했다이 일의 HTML5 방법도 있습니다 체크 아웃 : http://www.html5rocks.com/en/tutorials/dnd/basics/