Web Front-end design mode-Implementation of Shopping Cart dragging...

Design scenario:

Ben is responsible for the increasing number of users of the Book City Network, and the type and quantity of books in the Book City are also expanding. At this time, some customers complained that the shopping cart of the Book City website is not smart enough, it is reflected in the fact that you need to click the + icon on the item to add it to the shopping cart. To view the content of your own shopping cart, you also need to click the shopping cart icon on the page to go To the content list of the shopping cart, this kind of Jump effect is quite bad, so some elderly customers complain, because they have poor memory, they often have to return to view what they have bought...

 

Design goals:

Intelligent shopping cart...

 

Solution:

Ben started to solve the problem. His initial idea was to create a shopping cart for the item to be dragged... in this way, you only need to drag the product to the shopping cart on the original product list, which is intuitive and convenient. The key is good visibility...

1. Ben first wrote three styles: the style of the item list, the style of the copy of the item list, and the style of the item list in the shopping cart...

 Style of the product list style and product list copy (the style of the copy is absolutely positioned)

. LeftContent {width: 400px; height: 466px; margin-left: 56px; padding: 18px; border-top: solid 3px #09acf7; border-bottom: solid 3px #09acf7; border-left: solid 1px #09acf7; border-right: solid 1px #09acf7; float: left; margin-right: 60px ;}. bookItem/* Item List style, absolutely positioned */{width: 180px; height: 125px; float: left; overflow: hidden; margin-right: 20px; margin-bottom: 20px; cursor: move ;}. bookItemMove/* the style of the copy of the item list, relative positioning */{width: 180px; height: 125px; float: left; overflow: hidden; margin-right: 20px; margin-bottom: 20px; position: absolute; background-color: White ;}. bookItem dl ,. bookItemMove dl {float: left; width: 180px; height: 125px; float: left; overflow: hidden ;}. bookItem dl dt ,. bookItemMove dl dt {float: left; height: 120px; width: 80px; margin-right: 12px ;}. bookItem dl dt img ,. bookItemMove dl dt img {width: 80px; height: 120px ;}. bookItem dl dd ,. bookItemMove dl dd {height: 120px; line-height: 1.8em; font-size: 12px; text-decoration: underline ;}

 

Style of the shopping cart:

. RightContent {width: pixel PX; float: left; overflow: hidden; height: auto; min-height: 200px; border-top: solid 3px #09acf7; border-bottom: solid 3px #09acf7; border-left: solid 1px #09acf7; border-right: solid 1px #09acf7; padding: 18px; font-size: 12px ;}. bookItemN {width: 180px; height: 150px; float: left; overflow: hidden; margin-right: 20px; margin-bottom: 20px; cursor: move; border: solid 1px #09acf7 ;}. bookItemN img/* Delete button style */{float: right; margin: 0; padding: 0; cursor: pointer; margin-right: 5px; margin-top: 5px ;}. bookItemN dl {float: left; width: 180px; height: 125px; overflow: hidden; padding: 0px; margin-left: 8px; margin-top: 0px ;}. bookItemN dl dt {float: left; height: 120px; width: 80px; margin-right: 12px ;}. bookItemN dl dt img {width: 80px; height: 120px ;}. bookItemN dl dd {height: 120px; line-height: 1.8em; font-size: 12px; text-decoration: underline ;}# container {margin-top: 66px ;}

 

The following is a script. The specific idea is to create a copy of the item in the book column. It is absolutely positioned. The position is the same as that of the item, and the content is the same, when the mouse clicks the copy, the copy is awakened, and the copy moves as the mouse moves.

If you move the cursor to the scope of the shopping cart and click the left mouse button to release the water, the copy content will be appended to the shopping cart, and the copy will return to the original location. If you are not in the scope of the shopping cart, the copy returns the original location without any operation...

The Code is as follows:

// Traverse the bookshelf for each item (. bookItem) create a copy var ItemNum = $ (". bookItem "). length; var ItemBook = $ (". bookItem "); for (var I = 0; I <ItemNum; I ++) {var CopyItem = ItemBook. eq (I); var left = CopyItem. offset (). left; var top = CopyItem. offset (). top; $ ('body '). append ('<div class = "BookItemMove" id = "' + I + '"> 'your copyitem.html () +' </div> '); // absolute Copy location, position floating in the original book item (. bookItem) above $ ("#" ii}.css ({left: left, top: top});} var currentItem; // global variable var moveStatu = false for the current book item; areaStatu = false; // moveStatu: determines whether the cursor is in the moving state; areaStatu: determines whether the mouse is moved into the shopping cart range var objMove = $ (". bookItemMove "); var xx, yy, oriX, oriY; xx, yy, oriX, oriY // represents the coordinate value after moving the item and the original coordinate value var cartPosition = $ (". rightContent "). offset (); // obtain the position of the shopping cart on the page (the upper and lower coordinates) var carLeft = cartPosition. left; var cartTop = cartPosition. top; var cartRight = carLeft + $ (". rightContent "). width (); var cartBottom = cartTop + $ (". rightContent "). height (); objMove. mousedown (function (e) {moveStatu = true; // set the moving status to true xx = e. clientX-$ (this ). offset (). left; // obtain the distance from the mouse to the left coordinate of the moving item yy = e. clientY-$ (this ). offset (). top; // obtain the distance from the mouse to the top coordinate of the moving item currentItem =$ (this); // set the current book item currentItem. fadeTo (5, 0.5); // sets the translucent degree when moving}) $ (document ). mousemove (function (e) {if (moveStatu) {var xxM = e. clientX-xx; // left coordinate var yyM = e. clientY-yy; // The moving top coordinate currentItem.css ({left: xxM, top: yyM}); if (e. clientX> carLeft & e. clientX <cartRight & e. clientY> cartTop & e. clientY <cartBottom) // This section is very important. It determines whether the mobile project is in the hot area of the shopping cart. If it is in, areaStatu is set to true, and the border {areaStatu = true; currentItem.css ({border: "dashed 1px #09acf7"});} else {currentItem.css ({border: "none"}); areaStatu = false; }}) vernier = 100; // set a cursor to set up id $ (document) for the item added to the shopping cart ). mouseup (function () {// when the mouse key is released, see if (moveStatu) {moveStatu = false; var id = currentItem to append the item to the shopping cart. attr ("id"); lefts = $ (". bookItem "). eq (id ). offset (). left; tops = $ (". bookItem "). eq (id ). offset (). top; currentItem.css ({left: lefts, top: tops, border: "none"}); if (areaStatu) // determine whether a mobile project is in the hotspot area of the shopping cart {vernier = vernier + 1; var newItem = '<div class = "BookItemN">  'your currentitem.html () + '</div>'; $ ('. rightcontent '). append (newItem) ;}} carLeft = cartPosition. left; cartTop = cartPosition. top; cartRight = carLeft + $ (". rightContent "). width (); cartBottom = cartTop + $ (". rightContent "). height () ;}) function lala (idObj) // Delete the corresponding item in the shopping cart based on the cursor value... {$ ("#" + idObj ). parents (". bookItemN "). remove ();}

 

Final effect:

 

 

 

 

Design summary:

In actual projects, if there are more than 6 shopping cart entries displayed in the list, this will not be done here, and the code is rough. It mainly introduces a way of thinking. This is my summary in my own project, hope there is a better way...

 

Source code download :( http://files.cnblogs.com/wzh2010/Drag.rar)