Speed up development with full-stack environments for every branch.

Learn More

How to create Drag n Drop Shopping Cart With jQuery UI

Forked from How to use the jQuery Selector.

488 Runs 587 Views 338 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>How to create Drag n Drop Shopping Cart With jQuery UI</title>
    <link rel="stylesheet" href="main.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="jquery-ui-1.9.0.custom.min.js"></script>
	<!--main js-->
    <script src="scripts.js"></script>
</head>
<body>

<div class="container">
	<section id="header" style="margin-bottom: 50px;"><h3>Drag ‘n’ Drop Shopping Cart With jQuery UI <h3></section>
	
	<!--Product container-->
	
    <section id="product">
        <ul class="clear">
            <li data-id="1">
                <a href="#">
                    <img src="http://lorempixel.com/150/100/technics/1/" alt="">
                    <h3>iPad 32gb retina screen</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="2">
                <a href="#">
                    <img src="http://lorempixel.com/150/100/technics/2/" alt="">
            		<h3>Turntable mixer</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="3">
                <a href="#">
                    <img src="http://lorempixel.com/150/100/technics/3/" alt="">
            		<h3>IBM 15" super-fast computer</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="4">
                <a href="#">
                    <img src="http://lorempixel.com/150/100/technics/4/" alt="">
            		<h3>Some crazy circuit</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="5">
                <a href="#">
                    <img src="http://lorempixel.com/150/100/technics/5/" alt="">
                    <h3>White earpieces</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="6">
                <a href="#">
                    <img src="http://lorempixel.com/150/100/technics/6/" alt="">
            		<h3>Headphones with free keyboard</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="7">
                <a href="#">
                    <img src="http://lorempixel.com/150/100/technics/7/" alt="">
            		<h3>iPhone 4S</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="8">
                <a href="#">
                    <img src="http://lorempixel.com/150/100/technics/8/" alt="">
            		<h3>Another crazy circuit or..</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
        </ul>
	</section>
    <aside id="sidebar">
        <div class="basket">
            <div class="basket_list">
                <div class="head">
                    <span class="name">Product name</span>
                    <span class="count">Quantity</span>
                </div>
				<!-- Drop element will be shown here-->
                <ul></ul>
            </div>
        </div>
    </aside>
</div>
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).