Helllo HTML5에서 끌어서 놓기가 필요한 프로젝트에서 작업 중입니다. http://apps.sourcebits.com/cart543/index.htmlHTML 5 끌어서 놓기
하지만 끌기 항목이 드래그 된 후에도 위치를 유지하고 이미지를 드래그 한 후에도 삭제 된 이미지가 동일한 이미지가 아닌 다른 이미지가되도록하고 싶습니다. . 그것을 할 방법이 있습니까? 미리 감사드립니다 :) 만약 누군가 내게 이것에 대한 튜토리얼을 찾거나 이것을위한 코드를 줄 수 있다면 좋을 것입니다. 건배!
단지 JQuery와 UI follow link
$(".selector").draggable({ helper: "clone" });
$(".dropHere").droppable({
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
$('<div></div>').text(ui.draggable.text()).appendTo(this);
}
});
기술 수준에서 HTML만으로는이 작업을 수행 할 수 없습니다. 그것은 엄격하게 마크 업 언어입니다. 그러나 요즘 사람들은 HTML5를 모든 웹 기술의 최신 버전이라고 부르며 HTML 5.0을 의미하지는 않습니다.
아마도 드래그 앤 드롭 기능을 만들려면 JQuery와 같은 클라이언트 측 언어를 사용해야 할 것입니다. 서버에 업로드되는 파일을 계획하는 경우 PHP와 같은 서버 측 언어. 그러나 당신의 시도가 http://apps.sourcebits.com/cart543/index.html과 동일하다면 jquery 만 필요할 것입니다.
내 파이어 폭스에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 페이지를 저장할 수 있음을 언급 할 가치가 있습니다. 내 로컬 컴퓨터에서 열었을 때 사이트에서했던 것과 똑같이 작동했습니다. 그래서 나는 sourcebits.com에 대해 그렇게하고 나서 필요한 변경을하도록 권장 할 것입니다.
여기 나는 당신의 삶을 편하게 해드릴 것입니다. 필요한 경우 다음을 수정하십시오. 그냥 복사 및 붙여 넣기
HTML
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>HTML5 Development | CSS3 Development | Shopping Cart Development | Cart 543</title>
<meta name="description" content="Cart543 is minimalistic shopping cart developed in HTML5 and CSS3">
<meta name="keywords" content="HTML5 Development, CSS3 Development, eCommerce Development, Shopping Cart Development, Web Development, User Interface Design">
<link type="text/css" rel="stylesheet" href="reset.css" media="screen">
<link type="text/css" rel="stylesheet" href="style.css" media="screen">
<script src="jquery-1.js"></script>
<script src="main.js"></script>
<style type="text/css" charset="utf-8">/* See license.txt for terms of usage */
/** reset styling **/
.firebugResetStyles {
z-index: 2147483646 !important;
top: 0 !important;
left: 0 !important;
display: block !important;
border: 0 none !important;
margin: 0 !important;
padding: 0 !important;
outline: 0 !important;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
max-height: none !important;
position: fixed !important;
transform: rotate(0deg) !important;
transform-origin: 50% 50% !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent none !important;
pointer-events: none !important;
white-space: normal !important;
}
.firebugBlockBackgroundColor {
background-color: transparent !important;
}
.firebugResetStyles:before, .firebugResetStyles:after {
content: "" !important;
}
/**actual styling to be modified by firebug theme**/
.firebugCanvas {
display: none !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBox {
width: auto !important;
position: static !important;
}
.firebugLayoutBoxOffset {
opacity: 0.8 !important;
position: fixed !important;
}
.firebugLayoutLine {
opacity: 0.4 !important;
background-color: #000000 !important;
}
.firebugLayoutLineLeft, .firebugLayoutLineRight {
width: 1px !important;
height: 100% !important;
}
.firebugLayoutLineTop, .firebugLayoutLineBottom {
width: 100% !important;
height: 1px !important;
}
.firebugLayoutLineTop {
margin-top: -1px !important;
border-top: 1px solid #999999 !important;
}
.firebugLayoutLineRight {
border-right: 1px solid #999999 !important;
}
.firebugLayoutLineBottom {
border-bottom: 1px solid #999999 !important;
}
.firebugLayoutLineLeft {
margin-left: -1px !important;
border-left: 1px solid #999999 !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBoxParent {
border-top: 0 none !important;
border-right: 1px dashed #E00 !important;
border-bottom: 1px dashed #E00 !important;
border-left: 0 none !important;
position: fixed !important;
width: auto !important;
}
.firebugRuler{
position: absolute !important;
}
.firebugRulerH {
top: -15px !important;
left: 0 !important;
width: 100% !important;
height: 14px !important;
background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%13%88%00%00%00%0E%08%02%00%00%00L%25a%0A%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04%F8IDATx%DA%EC%DD%D1n%E2%3A%00E%D1%80%F8%FF%EF%E2%AF2%95%D0D4%0E%C1%14%B0%8Fa-%E9%3E%CC%9C%87n%B9%81%A6W0%1C%A6i%9A%E7y%0As8%1CT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AATE9%FE%FCw%3E%9F%AF%2B%2F%BA%97%FDT%1D~K(%5C%9D%D5%EA%1B%5C%86%B5%A9%BDU%B5y%80%ED%AB*%03%FAV9%AB%E1%CEj%E7%82%EF%FB%18%BC%AEJ8%AB%FA'%D2%BEU9%D7U%ECc0%E1%A2r%5DynwVi%CFW%7F%BB%17%7Dy%EACU%CD%0E%F0%FA%3BX%FEbV%FEM%9B%2B%AD%BE%AA%E5%95v%AB%AA%E3E5%DCu%15rV9%07%B5%7F%B5w%FCm%BA%BE%AA%FBY%3D%14%F0%EE%C7%60%0EU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5JU%88%D3%F5%1F%AE%DF%3B%1B%F2%3E%DAUCNa%F92%D02%AC%7Dm%F9%3A%D4%F2%8B6%AE*%BF%5C%C2Ym~9g5%D0Y%95%17%7C%C8c%B0%7C%18%26%9CU%CD%13i%F7%AA%90%B3Z%7D%95%B4%C7%60%E6E%B5%BC%05%B4%FBY%95U%9E%DB%FD%1C%FC%E0%9F%83%7F%BE%17%7DkjMU%E3%03%AC%7CWj%DF%83%9An%BCG%AE%F1%95%96yQ%0Dq%5Dy%00%3Et%B5'%FC6%5DS%95pV%95%01%81%FF'%07%00%00%00%00%00%00%00%00%00%F8x%C7%F0%BE%9COp%5D%C9%7C%AD%E7%E6%EBV%FB%1E%E0(%07%E5%AC%C6%3A%ABi%9C%8F%C6%0E9%AB%C0'%D2%8E%9F%F99%D0E%B5%99%14%F5%0D%CD%7F%24%C6%DEH%B8%E9rV%DFs%DB%D0%F7%00k%FE%1D%84%84%83J%B8%E3%BA%FB%EF%20%84%1C%D7%AD%B0%8E%D7U%C8Y%05%1E%D4t%EF%AD%95Q%BF8w%BF%E9%0A%BF%EB%03%00%00%00%00%00%00%00%00%00%B8vJ%8E%BB%F5%B1u%8Cx%80%E1o%5E%CA9%AB%CB%CB%8E%03%DF%1D%B7T%25%9C%D5(%EFJM8%AB%CC'%D2%B2*%A4s%E7c6%FB%3E%FA%A2%1E%80~%0E%3E%DA%10x%5D%95Uig%15u%15%ED%7C%14%B6%87%A1%3B%FCo8%A8%D8o%D3%ADO%01%EDx%83%1A~%1B%9FpP%A3%DC%C6'%9C%95gK%00%00%00%00%00%00%00%00%00%20%D9%C9%11%D0%C0%40%AF%3F%EE%EE%92%94%D6%16X%B5%BCMH%15%2F%BF%D4%A7%C87%F1%8E%F2%81%AE%AAvzr%DA2%ABV%17%7C%E63%83%E7I%DC%C6%0Bs%1B%EF6%1E%00%00%00%00%00%00%00%00%00%80cr%9CW%FF%7F%C6%01%0E%F1%CE%A5%84%B3%CA%BC%E0%CB%AA%84%CE%F9%BF)%EC%13%08WU%AE%AB%B1%AE%2BO%EC%8E%CBYe%FE%8CN%ABr%5Dy%60~%CFA%0D%F4%AE%D4%BE%C75%CA%EDVB%EA(%B7%F1%09g%E5%D9%12%00%00%00%00%00%00%00%00%00H%F6%EB%13S%E7y%5E%5E%FB%98%F0%22%D1%B2'%A7%F0%92%B1%BC%24z3%AC%7Dm%60%D5%92%B4%7CEUO%5E%F0%AA*%3BU%B9%AE%3E%A0j%94%07%A0%C7%A0%AB%FD%B5%3F%A0%F7%03T%3Dy%D7%F7%D6%D4%C0%AAU%D2%E6%DFt%3F%A8%CC%AA%F2%86%B9%D7%F5%1F%18%E6%01%F8%CC%D5%9E%F0%F3z%88%AA%90%EF%20%00%00%00%00%00%00%00%00%00%C0%A6%D3%EA%CFi%AFb%2C%7BB%0A%2B%C3%1A%D7%06V%D5%07%A8r%5D%3D%D9%A6%CAu%F5%25%CF%A2%99%97zNX%60%95%AB%5DUZ%D5%FBR%03%AB%1C%D4k%9F%3F%BB%5C%FF%81a%AE%AB'%7F%F3%EA%FE%F3z%94%AA%D8%DF%5B%01%00%00%00%00%00%00%00%00%00%8E%FB%F3%F2%B1%1B%8DWU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*UiU%C7%BBe%E7%F3%B9%CB%AAJ%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5*%AAj%FD%C6%D4%5Eo%90%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5%86%AF%1B%9F%98%DA%EBm%BBV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%AD%D6%E4%F58%01%00%00%00%00%00%00%00%00%00%00%00%00%00%40%85%7F%02%0C%008%C2%D0H%16j%8FX%00%00%00%00IEND%AEB%60%82") repeat-x !important;
border-top: 1px solid #BBBBBB !important;
border-right: 1px dashed #BBBBBB !important;
border-bottom: 1px solid #000000 !important;
}
.firebugRulerV {
top: 0 !important;
left: -15px !important;
width: 14px !important;
height: 100% !important;
background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0E%00%00%13%88%08%02%00%00%00%0E%F5%CB%10%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%06~IDATx%DA%EC%DD%D1v%A20%14%40Qt%F1%FF%FF%E4%97%D9%07%3BT%19%92%DC%40(%90%EEy%9A5%CB%B6%E8%F6%9Ac%A4%CC0%84%FF%DC%9E%CF%E7%E3%F1%88%DE4%F8%5D%C7%9F%2F%BA%DD%5E%7FI%7D%F18%DDn%BA%C5%FB%DF%97%BFk%F2%10%FF%FD%B4%F2M%A7%FB%FD%FD%B3%22%07p%8F%3F%AE%E3%F4S%8A%8F%40%EEq%9D%BE8D%F0%0EY%A1Uq%B7%EA%1F%81%88V%E8X%3F%B4%CEy%B7h%D1%A2E%EBohU%FC%D9%AF2fO%8BBeD%BE%F7X%0C%97%A4%D6b7%2Ck%A5%12%E3%9B%60v%B7r%C7%1AI%8C%BD%2B%23r%00c0%B2v%9B%AD%CA%26%0C%1Ek%05A%FD%93%D0%2B%A1u%8B%16-%95q%5Ce%DCSO%8E%E4M%23%8B%F7%C2%FE%40%BB%BD%8C%FC%8A%B5V%EBu%40%F9%3B%A72%FA%AE%8C%D4%01%CC%B5%DA%13%9CB%AB%E2I%18%24%B0n%A9%0CZ*Ce%9C%A22%8E%D8NJ%1E%EB%FF%8F%AE%CAP%19*%C3%BAEKe%AC%D1%AAX%8C*%DEH%8F%C5W%A1e%AD%D4%B7%5C%5B%19%C5%DB%0D%EF%9F%19%1D%7B%5E%86%BD%0C%95%A12%AC%5B*%83%96%CAP%19%F62T%86%CAP%19*%83%96%CA%B8Xe%BC%FE)T%19%A1%17xg%7F%DA%CBP%19*%C3%BA%A52T%86%CAP%19%F62T%86%CA%B0n%A9%0CZ%1DV%C6%3D%F3%FCH%DE%B4%B8~%7F%5CZc%F1%D6%1F%AF%84%F9%0F6%E6%EBVt9%0E~%BEr%AF%23%B0%97%A12T%86%CAP%19%B4T%86%CA%B8Re%D8%CBP%19*%C3%BA%A52huX%19%AE%CA%E5%BC%0C%7B%19*CeX%B7h%A9%0C%95%E1%BC%0C%7B%19*CeX%B7T%06%AD%CB%5E%95%2B%BF.%8F%C5%97%D5%E4%7B%EE%82%D6%FB%CF-%9C%FD%B9%CF%3By%7B%19%F62T%86%CA%B0n%D1R%19*%A3%D3%CA%B0%97%A12T%86uKe%D0%EA%B02*%3F1%99%5DB%2B%A4%B5%F8%3A%7C%BA%2B%8Co%7D%5C%EDe%A8%0C%95a%DDR%19%B4T%C66%82fA%B2%ED%DA%9FC%FC%17GZ%06%C9%E1%B3%E5%2C%1A%9FoiB%EB%96%CA%A0%D5qe4%7B%7D%FD%85%F7%5B%ED_%E0s%07%F0k%951%ECr%0D%B5C%D7-g%D1%A8%0C%EB%96%CA%A0%A52T%C6)*%C3%5E%86%CAP%19%D6-%95A%EB*%95q%F8%BB%E3%F9%AB%F6%E21%ACZ%B7%22%B7%9B%3F%02%85%CB%A2%5B%B7%BA%5E%B7%9C%97%E1%BC%0C%EB%16-%95%A12z%AC%0C%BFc%A22T%86uKe%D0%EA%B02V%DD%AD%8A%2B%8CWhe%5E%AF%CF%F5%3B%26%CE%CBh%5C%19%CE%CB%B0%F3%A4%095%A1%CAP%19*Ce%A8%0C%3BO*Ce%A8%0C%95%A12%3A%AD%8C%0A%82%7B%F0v%1F%2FD%A9%5B%9F%EE%EA%26%AF%03%CA%DF9%7B%19*Ce%A8%0C%95%A12T%86%CA%B8Ze%D8%CBP%19*Ce%A8%0C%95%D1ae%EC%F7%89I%E1%B4%D7M%D7P%8BjU%5C%BB%3E%F2%20%D8%CBP%19*Ce%A8%0C%95%A12T%C6%D5*%C3%5E%86%CAP%19*Ce%B4O%07%7B%F0W%7Bw%1C%7C%1A%8C%B3%3B%D1%EE%AA%5C%D6-%EBV%83%80%5E%D0%CA%10%5CU%2BD%E07YU%86%CAP%19*%E3%9A%95%91%D9%A0%C8%AD%5B%EDv%9E%82%FFKOee%E4%8FUe%A8%0C%95%A12T%C6%1F%A9%8C%C8%3D%5B%A5%15%FD%14%22r%E7B%9F%17l%F8%BF%ED%EAf%2B%7F%CF%ECe%D8%CBP%19*Ce%A8%0C%95%E1%93~%7B%19%F62T%86%CAP%19*Ce%A8%0C%E7%13%DA%CBP%19*Ce%A8%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4%AE%A4%F5%25%C0%00%DE%BF%5C'%0F%DA%B8q%00%00%00%00IEND%AEB%60%82") repeat-y !important;
border-left: 1px solid #BBBBBB !important;
border-right: 1px solid #000000 !important;
border-bottom: 1px dashed #BBBBBB !important;
}
.overflowRulerX > .firebugRulerV {
left: 0 !important;
}
.overflowRulerY > .firebugRulerH {
top: 0 !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.fbProxyElement {
position: fixed !important;
pointer-events: auto !important;
}
</style></head>
<body>
<header>
<div class="inner">
<a class="title" href="http://apps.sourcebits.com/cart543/index.html"><h1>Cart</h1></a>
<a id="btn_purchase_history" title="Home" class="btn" onmouseover="className = 'btnfade'" onmouseout="className = 'btn'" href="http://apps.sourcebits.com/cart543/history.html">Purchase History</a>
</div>
</header>
<section id="product_grid">
<div class="inner">
<h3>Choose a Product:</h3>
<div id="selling_items" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">
<img class="" src="HTML5%20Development%20_%20CSS3%20Development%20_%20Shopping%20Cart%20Development%20_%20Cart%20543_files/item1.png" alt="Watch-1" id="item1" onmouseover="className = 'zoom'" onmouseout="className = ''" ondragstart="drag(this, event)">
<img class="" src="HTML5%20Development%20_%20CSS3%20Development%20_%20Shopping%20Cart%20Development%20_%20Cart%20543_files/item4.png" alt="Watch-4" id="item4" onmouseover="className = 'zoom'" onmouseout="className = ''" ondragstart="drag(this, event)">
<img class="" src="HTML5%20Development%20_%20CSS3%20Development%20_%20Shopping%20Cart%20Development%20_%20Cart%20543_files/item5.png" alt="Watch-5" id="item5" onmouseover="className = 'zoom'" onmouseout="className = ''" ondragstart="drag(this, event)">
<img src="HTML5%20Development%20_%20CSS3%20Development%20_%20Shopping%20Cart%20Development%20_%20Cart%20543_files/item6.png" alt="Watch-6" id="item6" onmouseover="className = 'zoom'" onmouseout="className = ''" ondragstart="drag(this, event)">
<img class="" src="HTML5%20Development%20_%20CSS3%20Development%20_%20Shopping%20Cart%20Development%20_%20Cart%20543_files/item7.png" alt="Watch-7" id="item7" onmouseover="className = 'zoom'" onmouseout="className = ''" ondragstart="drag(this, event)">
<img class="" src="HTML5%20Development%20_%20CSS3%20Development%20_%20Shopping%20Cart%20Development%20_%20Cart%20543_files/item3.png" alt="Watch-3" id="item3" onmouseover="className = 'zoom'" onmouseout="className = ''" ondragstart="drag(this, event)"></div>
</div>
</section>
<section id="product_cart">
<div class="inner">
<h2>Drag Here</h2>
<div id="buying_items" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">
<img class="" src="HTML5%20Development%20_%20CSS3%20Development%20_%20Shopping%20Cart%20Development%20_%20Cart%20543_files/item2.png" alt="Watch-2" id="item2" onmouseover="className = 'zoom'" onmouseout="className = ''" ondragstart="drag(this, event)"></div>
</div>
</section>
<section id="about">
<div class="inner">
<div id="description">
<p>Five stands for <strong>HTML 5.</strong> Four means <strong>Safari 4.</strong> Three is <strong>CSS 3.</strong></p>
<p>Cart543 is minimalistic checkout module of a fictional shopping
cart. It is powered by HTML 5 and CSS 3. It uses modern features
implemented in Safari 4, such as Canvas drawing, SVG images, CSS
animation, HTML 5 Sessions, Multi-step form, HTML drag and drop, latest
HTML 5 tags etc. It uses minimal Javascript to process data from HTML 5
form.</p>
<p>Since most of above-mentioned features are implemented in Safari only, hence this page works best in <a href="http://www.apple.com/safari/download/">Safari 4 Beta</a>.</p>
</div>
<a onclick="saveCart(buying_items);" id="btn_checkout" class="btn" onmouseover="className = 'btnfade'" onmouseout="className = 'btn'" href="http://apps.sourcebits.com/cart543/checkout-step1.html">Checkout</a>
</div>
</section>
<footer>
<div class="inner">
<span class="small">©</span> 2009 Cart543. <a href="http://www.sourcebits.com/web-development" target="_blank" title="Web Development">Web Development</a> by Sourcebits.
</div>
</footer>
<div style="left: 121.5px ! important; top: 170px ! important;" class="firebugResetStyles firebugBlockBackgroundColor firebugLayoutBox firebugLayoutBoxOffset"><div style="padding: 0px ! important; background-color: rgb(237, 255, 100) ! important;" class="firebugResetStyles firebugLayoutBox"><div style="padding: 0px ! important; background-color: rgb(68, 68, 68) ! important;" class="firebugResetStyles firebugLayoutBox"><div style="padding: 0px ! important; background-color: SlateBlue ! important;" class="firebugResetStyles firebugLayoutBox"><div style="width: 1020px ! important; height: 17px ! important; background-color: SkyBlue ! important;" class="firebugResetStyles firebugLayoutBox"></div></div></div></div></div></body></html>
CSS
/* @override http://sbnew.publishy.com/cart543/v2/css/reset.css */
/* --------------------------------------------------------------
reset.css
* Resets default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1.5;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* Remove annoying border on linked images. */
a img { border: none; }
더 나는 뛰쳐했습니다
@CHARSET "UTF-8";
/**
* Project: Cart543
* Date of creation: March 6, 2009;
* Last Update: March 16, 2009;
*/
@font-face {
font-family: "PF DinDisplay Pro Light";
src: url('../fonts/PFDinDisplayPro-Light.ttf');
}
@font-face {
font-family: "PF DinDisplay Pro Regular";
src: url('../fonts/PFDinDisplayPro-Reg.ttf');
}
@font-face {
font-family: "PF DinDisplay Pro Thin";
src: url('../fonts/PFDinDisplayPro-Thin.ttf');
}
body {
font: normal 12px "PF DinDisplay Pro Light", Tahoma, Helvetica, "Myriad Pro", Verdana, Geneva, Arial, sans-serif, "Century Gothic", "Trebuchet MS";
}
body {
background: #ff3000;
color: #fff;
text-transform: uppercase;
}
h2, h3, .user-input, label, .btn, .btnfade {
font: normal 12px "PF DinDisplay Pro Regular", Tahoma, Helvetica, "Myriad Pro", Verdana, Geneva, Arial, sans-serif, "Century Gothic", "Trebuchet MS";
text-transform: uppercase;
}
#btn_purchase_history, #btn_checkout, #btn_return, #btn_ok {
cursor: pointer;
text-align: center;
min-width: 200px;
width: 200px !important;
border: solid 1px #fff;
text-decoration: none;
margin-right: 5px;
display: block;
float: right;
position: relative;
-webkit-transition: -webkit-transform, background-color, 1s, ease-in 300ms;
}
.btn, .btnfade {
cursor: pointer;
min-width: 100px;
width: 100px !important;
padding: 5px 10px 0 10px !important;
margin: 0 0 0 10px;
color: #fff;
background-color: #ff3000;
font-size: 16px;
border: solid 1px #ff3000;
}
.btnfade {
background-color: #fff;
color: #ff3000;
-webkit-transition: -webkit-transform, background-color, 1s, ease-in 300ms;
}
#btn_purchase_history {
font-size: 20px;
top: 90px;
}
#btn_checkout, #btn_return, #btn_ok {
font-size: 30px;
font-weight: 700;
}
#btn_ok {
width: 222px !important;
margin-bottom: 10px;
border: solid 1px #ff3000;
}
header h1 {
font: normal 12px "PF DinDisplay Pro Thin", Tahoma, Helvetica, "Myriad Pro", Verdana, Geneva, Arial, sans-serif, "Century Gothic", "Trebuchet MS";
font-weight: normal;
font-size: 129px;
color: #fff;
display: block;
margin: 0 0 0 -5px;
padding: 0;
width: 458px;
position: relative;
float: left;
text-transform: uppercase;
background: url(../images/543.svg) no-repeat right 18px;
}
.title {
text-decoration: none;
}
.mac header h1 {
background: url(../images/543.svg) no-repeat right 17px;
}
p {
margin: 0 0 10px 0;
line-height: 20px;
}
a {
text-decoration: underline;
color: #fff;
background: #ff3000;
}
strong {
background: #fff;
color: #ff3000;
padding: 4px 4px 0;
}
.small {
text-transform: lowercase !important;
}
section, header, footer {
display: block;
}
.inner {
margin: 0 auto;
width: 1020px;
position: relative;
}
header {
display: block;
height: 160px;
}
header .inner {
background: url(../images/arrow-top.png) no-repeat 880px bottom;
overflow: hidden;
height: 100%;
}
#logo {
position: relative;
float: left;
}
#product_grid {
background: #fff;
min-height: 260px;
position: relative;
overflow: hidden;
height: auto;
}
#product_grid .inner {
padding: 10px 0;
color: #40e1b2;
}
.user-input {
color: #11a479;
font-weight: 700;
}
#product_grid .inner h3 {
color: #ff3000;
font-size: 14px;
text-transform: uppercase;
}
#selling_items {
position: relative;
text-align: center;
overflow: hidden;
margin: 35px 0 0 0;
min-height: 220px;
}
#selling_items img, #buying_items img {
margin: 0 22px;
cursor: pointer;
}
.zoom {
-webkit-transform: scale(1.1);
}
#product_cart {
background-color: #40e1b1;
height: 220px;
position: relative;
text-align: center;
}
#product_cart .inner {
background: url(../images/arrow-bot.png) no-repeat center top;
padding: 25px 0 0 0;
}
#product_cart .inner h2 {
font-size: 16px;
}
#buying_items {
position: relative;
overflow: hidden;
min-height: 180px;
/*
background-color:#000;*/
padding: 10px 0 0 0;
}
#about {
overflow: hidden;
position: relative;
margin: 0;
}
#about .inner {
background: url(../images/arrow-bot-green.png) no-repeat 880px top;
padding: 40px 0 0 0;
}
#description {
width: 450px;
float: left;
font-size: 14px;
text-align: justify;
text-justify: newspaper;
}
/**
* Checkout form *
*/
label {
width: 150px;
padding: 10px 5px;
display: block;
float: left;
text-align: right;
font-size: 16px;
font-weight: 700;
margin: 5px 0px 0px;
}
input, textarea {
width: 250px;
padding: 2px 0 2px 5px;
margin: 10px 0 10px 0;
display: block;
float: right;
font-size: 18px;
}
textarea {
height: 120px;
}
.form_checkout {
width: 450px;
color: #40e1b1;
float: left;
}
.form_checkout p {
overflow: hidden;
}
p#details, p#address {
margin-top: 20px;
}
footer {
text-align: right;
clear: both;
font-size: 10px;
}
CSS 공간하지만 당신은 단지라는 두 개의 다른 JQuery와 파일 main.js 및 JQuery와 - 1.js을
이안녕하세요 나는 당신의 방법을 시도하여 이것 좀 봐하지만 밝혀 그렇지는 무엇인가요 필요 내가 원했던 .. 녹색 상자로 드래그 할 항목이 필요하지만 여전히 흰색 상자에 남아 있습니다. 드래그 앤 카피 (drag and copy)와 같은 것이지만 드래그 앤드 드래그를 계속하면 여러 카피가되는 것을 원하지 않습니다. –
@JosLuciette 위에서 언급 한 메소드를 사용하여 jquery if 문을 추가하여 다른 항목이 해당 영역에 배치되지 않도록합니다. 보일러 판으로 그 코드를 사용합니다. 다른 항목이 누락되지 않도록 jquery if 문을 추가하십시오. CSS에서 필요한 색상을 바꾸는 것 –
안녕하세요, 바이올린에 감사드립니다. 상자에있는 항목을 하나만 사용할 수 있습니까? 예를 들어 흰색 상자에 드래그 (1 드래그)하면 오른쪽에 나타납니다. 그래서 내가 드래그 (드래그 2) 흰색 상자에 내가 그것을 대체 (드래그 1) –
나는 또한 흰색 상자 (삭제/취소) 밖으로 드래그 수 있어야합니다 .. 너무 감사 할 것입니다 이러한 작품! –
안녕하세요, 나는 바이올린을 업데이트했습니다. check http://jsfiddle.net/richapandey/awtmJ/5/ – Era