jQuery를 이용한 쇼핑카드 예제

jQuery를 활용한 쇼핑 카트 구현 예제 jQuery를 활용하여 쇼핑 카트를 만들어봤는데 재밌네요.
좀더 확장하면 쇼핑몰에 응용할 수 있는 수준이군요. 예제 링크 1. Draggables 1.1 Options: handle string or DOMElement optional the handel that starts the draggable revert boolean optional when true, on stop drag the element returns to initial position ghosting boolean optional when true a copy of the element is moved zIndex integer optional zIndex depth for the element while in drag opacity float ( < 1) optional opacity for the element while in drag grid mixed (integer or array) optional define a grid for draggable to snap to fx integer optional duration for the effect applied to the draggable containment string ('parent' or 'document') or array (left, top, width, height) optional define the zone where the draggable can be moved. Use value 'parent' to move it inside parent element, 'document' for not moving it outside the document, so no extra scroll. axis string ('vertically' or 'horizontally') optional define the axis which the dragged elements moves on onStart function optional callback function triggered when the dragging starts onStop function optional callback function triggered when the dragging stops onChange function optional callback function triggered when the dragging stops and elements was moved at least one pixel onDrag function optional callback function triggered while the element is dragged. Receives two parameters the x and y coordinates. You can return an object with new coordinates {x: new x, y: new y} so this way you can interact with the dragging process, build your containment for instance. insideParent boolean optional tell whatever the element is dragged inside its parent snapDistance integer optional the dragged element is not moved unless is moved more then snapDistance. This way you can prevent accidental dragging cursorAt object optional the dragged element is moved to the cursor position with the offset specified. Accepts value for top, left, right and bottom offset. autoSize boolean optional when true the drag helper is resized to its content, instead of the dragged element's sizes frameClass String optional When is set the cloned element is hidden so only a frame is dragged 1.2 사용된 샘플 소스 $('div.product').Draggable({revert: true, fx: 300, ghosting: true, opacity: 0.4});
2. Droppables 2.1 Options: accept string mandatory the class name for draggables to get accepted by the droppable activeclass string optional when an acceptable draggable is moved the droppable gets this class hoverclass string optional when an acceptable draggable is inside the droppable, the droppable dets this class tolerance 'pointer', 'intersect' or 'fit' optional points how the draggble must be against the droppable onDrop function optional when an accepted draggble is drop on a droppable this functin is called. Applies to the droppable and gets as parameter the draggable DOMElement onHover function optional called when an accepted draggble is hovering a droppable. Applies to the droppable and gets as parameter the draggable DOMElement onOut function optional called when an accepted draggble is leaving a droppable. Applies to the droppable and gets as parameter the draggable DOMElement 2.2 사용된 샘플 소스 $('#cart').Droppable(

{

accept : 'product',

activeclass: 'activeCart',

hoverclass: 'hoverCart',

tolerance: 'intersect',

onActivate: function(dragged)

{

if (!this.shakedFirstTime) {

$(this).Shake(3);

this.shakedFirstTime = true;

}

},

onDrop: addProductToCart

}

);
재밌네요. 좀 더 공부한다면 더 좋은 인터페이스, 더 많은 문제점을 알게 될 것 같네요. 아직은 모르는 부분이 많아서인지 기본 기능만 되어도 좋아 보이네요. jQuery 다시 보았어...^^