드래그 앤 드롭으로 장바구니에 추가 기능

나는 내 웹 사이트에 대한 새로운 디자인을 시험하고 있으며, 내 사이트로 약간의 드래그 앤 드롭 기능으로 장바구니에 추가 기능을 추가로 실행하기로 결정했습니다. 기본적으로 사용자는 항목의 그림을 화면의 오른쪽 상단 모서리 ('위치 : 고정'상자, 아마도?)로 드래그 한 다음 사각형 안에이 항목을 놓으면 사용자 카트.드래그 앤 드롭으로 장바구니에 추가 기능

간단한 생각이지만 이전에 보지 못한 것이 있습니다.

누구든지 구현할 수 있습니까? 나는 그것에 대해 어떻게 가야할지 모르겠다. 고마워. 다음과 같이

지금까지 내 작품은 다음과 같습니다

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="drag.css" /> 
     <script type="text/javascript"> 
     function setupEvents() { 
      document.getElementById('picture').onmousedown = enableDragging; 
      } 
     function enableDragging() { 
      document.onmousemove = dragElement; 
      document.onmouseup = disableDragging; 
      return false; 
      } 
      function dragElement(evt) { 
       document.getElementById('picture').style.left = evt.clientX; 
       document.getElementById('picture').style.top = evt.clientY; 
      return false; 
      } 
      function disableDragging() { 
       document.onmousemove = null; 
       document.onmouseup = null; 
      } 

     </script> 
    </head> 
    <body onload="setupEvents()"> 
     <div> 
      <p><img src="picture.png" alt="picture" id="picture" /></p> 
     </div> 


    </body> 
</html>

출처

2011-04-01 Michael De Brune

응용 프로그램 JS 무거운 될 것입니다 경우에, 나는 자바 스크립트 라이브러리를 사용하는 것이 좋습니다. JS 무거운 앱 구현의 복잡성을 줄이는 인터페이스와 API 레이어를 제공합니다. 나는 jquery을 선호하지만 there are many more libraries out there을 선호합니다.

는

당신이 찾고있는 기능은 위젯으로 jQueryUI 프로젝트에서 사용할 수 있습니다 : http://jqueryui.com/demos/droppable/

어떤 사람들은 내가 프레임 워크를 추천 해요이 불쾌하다는 사실을 발견하지만, 작업이 당신을 위해 빨리 끝낼 것입니다. http://jsbin.com/ejolo6

출처

2011-04-01 11:14:51 JohnP

안녕, 응답 대단히 감사 :

편집 설정에 데모를 필요한 파일에이 예제에서보세요. 이 기능을 정확히 추가하려고합니다. 나는 여기에서 사용할 수있는 코드를 붙여 넣기를 시도했다. - http://jqueryui.com/demos/droppable/#shopping-cart와 그것을 실행하지만 그것은 그 웹 사이트에있는 것처럼 보이지 않는다. 어떤 충고 ? –

+0

그런 식으로 작동하지 않습니다. 라이브러리 및 종속성을 포함시켜야합니다. 다운로드 링크를 클릭하고 다음 화면에서 모두를 선택하십시오. 이렇게하면 찾아 볼 수있는 색인으로 모든 위젯을 사용할 수 있습니다. – JohnP

+0

답안에 예제를 추가했습니다. 원본보기를보고 전체 예제에 포함 된 파일을 살펴보십시오. – JohnP

드래그 앤 드롭으로 장바구니에 추가 기능

답변

관련 문제