如何制作物品“;可拖动的“;以及如何在HTML中汇总价格
How to make an item "draggable" in jQuery and how to total up prices in HTML?
我正在尝试创建一个可拖动的网店。我已经创建了所有的东西，除了左边的项目似乎无法拖动到右边的"购物车"。
购物车上也没有显示总价。
有人知道怎么解决这个问题吗？
我有一把小提琴。http://jsfiddle.net/4azrj3uv/
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Draggable</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Annie's Bakery</h1>
<div id="example-1-2">
<div class="column left first">
<ul class="sortable-list list1">
<li class="sortable-item" id="dragA"
>
<div class="red">Chocolate Chip Cookies <br><a class="more" data-id="dragA" data-price="5.99" name="quantity[0]" value="" placeholder="Quantity">More Info</a></div>
<div class="blue">Third Level A</div>
</li>
<li class="sortable-item" data-id="dragB">
<div class="red" data-id="dragB">Angel Cake <br><a class="more" data-id="dragB"
>More Info</a></div>
<div class="blue">Third Level B</div>
</li>
<li class="sortable-item" id="dragC">
<div class="red" data-id="dragC">Apple Cake <br><a class="more" data-id="dragC">More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragD"
>
<div class="red" data-id="dragD">Boston Cream Pie <br><a class="more" data-id="dragD"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragE"
>
<div class="red" data-id="dragE">Banana Cake <br> <a class="more" data-id="dragE">More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragF">
<div class="red" data-id="dragF">Birthday Cake<br><a class="more" data-id="dragF">More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragG">
<div class="red" data-id="dragG">Brownies <br><a class="more" data-id="dragG"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragH">
<div class="red" data-id="dragH">Carrot Cake<br><a class="more" data-id="dragH"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragI">
<div class="red" data-id="dragI">Cheese Cake <br><a class="more" data-id="dragI"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragJ">
<div class="red" data-id="dragJ">Ice Cream Cake <br><a class="more" data-id="dragJ"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragK">
<div class="red" data-id="dragK">Chiffon Cake <br><a class="more" data-id="dragK"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragL">
<div class="red" data-id="dragL">Coconut Cake <br><a class="more" data-id="dragL"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragM">
<div class="red" data-id="dragM">Blueberry Muffin<br><a class="more" data-id="dragM"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragN">
<div class="red" data-id="dragN">Cupcakes <br><a class="more" data-id="dragN"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragO">
<div class="red" data-id="dragO">Black forest Cake<br><a class="more" data-id="dragO"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragP">
<div class="red" data-id="dragP">Ginger bread<br><a class="more" data-id="dragP"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragQ">
<div class="red" data-id="dragQ">Gooey Butter Cake <br><a class="more" data-id="dragQ"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragR">
<div class="red" data-id="dragR">Layer Cake<br><a class="more" data-id="dragR"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragS">
<div class="red" data-id="dragS">Lemon Cake <br><a class="more" data-id="dragS"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" id="dragT">
<div class="red" data-id="dragT">Marble Cake<br><a class="more" data-id="dragT"
>More Info</a></div>
<div class="blue">Third Level C</div>
</li>
<li class="sortable-item" data-price="2.99" id="dragU">
<div class="red" data-id="dragU">Molten Chocolate Cake <br><a class="more" data-id="dragU"
>More Info</a></div>
<div class="green">Second Level D</div>
<div class="blue">Third Level D<br>
<input type="text" name="quantity[]" value="1">
</div>
<input type="hidden" name="sku[]" value="Ab12">
<input type="hidden" class="extendedPrice" value="2.99">
</li>
</ul>
</div>
<div class="column left">
<div class="green" id="dragAmore"> <img src="images/chocolate-chip.jpg" alt="Cookie" width="150" height="150">
<p>Cookies made with love and served best with a glass of cold milk just like your grannies cookies.</p><br><a data-id="dragA">Close</a></div>
<div class="green" id="dragBmore"><img src="images/angelcake.jpg" alt="Angel" width="150" height="150">
<p>Try Germanys famous apple cake here in your neighbourhood! Apples used are freshly picked organic apples gotten from our local farmers.</p><br><a data-id="dragB">Close</a></div>
<div class="green" id="dragCmore"><img src="images/Applecake.jpg" alt="Pie" width="150" height="150">
<p>Try Germanys famous apple cake here in your neighbourhood! Apples used are freshly picked organic apples gotten from our local farmers.</p><br><a data-id="dragC" >Close</a></div>
<div class="green" id="dragDmore"><img src="images/bostonpie.jpg" alt="Pie" width="150" height="150"><p>There was boston pizza and now theres Boston Pie which is even better! Make sure to try it.</p>
<br><a data-id="dragD">Close</a></div>
<div class="green" id="dragEmore"> <img src="images/bananacake.jpg" alt="Pie" width="150" height="150">
<p>Best had with tea or coffee. It has a strong taste of banana and sugar. This is one of my personal favorites!</p>
<br><a data-id="dragE">Close</a></div>
<div class="green" id="dragFmore"><img src="images/birthday.jpg" alt="Pie" width="200" height="150">
<p>We have a WIDE selection of birthday cakes ready to go and the option to customize your cake on order. We also have a wide variety of flavours.</p>
<br><a data-id="dragF">Close</a></div>
<div class="green" id="dragGmore"><img src="images/brownies.jpg" alt="Pie" width="200" height="150">
<p>Who doesn't love chocolaty brownies made from scratch and filled with goodness?</p>
<br><a data-id="dragG">Close</a></div>
<div class="green" id="dragHmore"><img src="images/carrotcake.jpg" alt="Pie" width="200" height="150">
<p>We all know carrots are good for our eyes but we may not all necessarily like eating plain carrots but we all sure do love cake!</p>
<br><a data-id="dragH">Close</a></div>
<div class="green" id="dragImore"><img src="images/cheesecake.jpg" alt="Pie" width="200" height="150">
<p>What you get when you combine the two best things, cheese and cake! Also comes with strawberries and any other fruit you'd prefer.</p>
<br><a data-id="dragI">Close</a></div>
<div class="green" id="dragJmore"><img src="images/icecream.jpg" alt="Pie" width="200" height="150">
<p>Ice cream cake is definetly my favourite thing! Ice cream and cake combined to make something so beautiful.</p>
<br><a data-id="dragJ">Close</a></div>
<div class="green" id="dragKmore"><img src="images/chiffon.jpg" alt="Pie" width="200" height="150">
<p>Light, airy cake made with vegetable oil, eggs, sugar, flour</p>
<br><a data-id="dragK">Close</a></div>
<div class="green" id="dragLmore"><img src="images/coconut.jpg" alt="Pie" width="200" height="150">
<p>A popular dessert in the Southern region of the United States. It is a cake frosted with a white frosting and covered in coconut flakes.</p>
<br><a data-id="dragL">Close</a></div>
<div class="green" id="dragMmore"><img src="images/blueberrymuffin.jpg" alt="Pie" width="200" height="150">
<p>Have this with tea or coffee! Its sure to be a great treat!</p>
<br><a data-id="dragM">Close</a></div>
<div class="green" id="dragNmore"><img src="images/cupcakes.jpg" alt="Pie" width="200" height="150">
<p>A small cake with various ingredients, usually topped with icing</p>
<br><a data-id="dragN">Close</a></div>
<div class="green" id="dragOmore"><img src="images/blackforest.jpg" alt="Pie" width="200" height="150">
<p>Cherries, kirsch, and chocolate</p>
<br><a data-id="dragO">Close</a></div>
<div class="green" id="dragPmore"><img src="images/gingerbread.jpg" alt="Pie" width="200" height="150">
<p>Gingerbread men made with ginger.</p>
<br><a data-id="dragP">Close</a></div>
<div class="green" id="dragQmore"><img src="images/gooey.jpg" alt="Pie" width="200" height="150">
<p>Originated from the US and filled with butter goodies.</p>
<br><a data-id="dragQ">Close</a></div>
<div class="green" id="dragRmore"><img src="images/layercake.jpg" alt="Pie" width="200" height="150">
<p>Egg yolk, sugar, butter, flour</p>
<br><a data-id="dragR">Close</a></div>
<div class="green" id="dragSmore"><img src="images/lemoncake.jpg" alt="Pie" width="200" height="150">
<p>Made with fresh lemon and perfect to have with a cup of tea.</p>
<br><a data-id="dragS">Close</a></div>
<div class="green" id="dragTmore"><img src="images/marble.jpg" alt="Pie" width="200" height="150">
<p>Vanilla, coffee, and/or chocolate</p>
<br><a data-id="dragT">Close</a></div>
<div class="green" id="dragUmore"><img src="images/molten.jpg" alt="Pie" width="200" height="150">
<p>Also known as lava cake is a popular dessert that combines the elements of a flourless chocolate cake (sometimes called a "chocolate decadence" cake) and a soufflé. Some other names used are "chocolate fondant", "chocolate moelleux", and "chocolate lava" cake.</p>
<br><a data-id="dragU">Close</a></div>
</div>
<form method="post" action="submit_cart.php">
<div class="column left">
<ul class="sortable-list list3">
</ul>
<input type="submit" name="submit" value="Checkout">
</div>
</form>
<div class="clearer"> </div>
</div>
<!--
<div class="ui-widget-content draggable red" data-top="" data-left"">
<p>Drag me around <a data-id="draggable">Destroy or other action</a></p>
</div>
<div class="ui-widget-content draggable green" data-top="" data-left"">
<p>Drag me around <a data-id="draggable">Destroy or other action</a></p>
</div>
<div class="ui-widget-content draggable blue" data-top="" data-left"">
<p>Drag me around <a data-id="draggable">Destroy or other action</a></p>
</div>
<div id="container">
</div>
-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Javascript：
$(document).ready(function(){
$(".more").click(
function () {
//alert("bang clicked");
var li = $(this).parents("li:first");
var dragObjectId = $(this).parents("li:first").attr("data-id");
$(li).slideUp("fast");
var more = "#" + $(this).attr("data-id") + "more";
$(more).slideDown("fast");
}
);
$(".green a").click(
function () {
var li = $(this).parents("li:first");
var dragObjectId = $(this).parents("li:first").attr("data-id");
$(li).slideDown("fast");
var more = "#" + $(this).attr("data-id") + "more";
$(more).slideUp("fast");
var close = "#" + $(this).attr("data-id");
$(close).attr("style","position: static");
}
);
$('#example-1-2 .sortable-list').sortable({
connectWith: '#example-1-2 .sortable-list'
});
$(".draggable").draggable({
connectToSortable: "#container"
});
});
您的fiddle中同时缺少jquery和jquery ui脚本引用。将它们添加到中可以为您提供所需的可拖动功能。
http://jsfiddle.net/xBB5x/9974/
$(".draggable").draggable({
connectToSortable: "#container"
});
（这个代码没有变化，只是我被要求在链接到小提琴时包含代码）
我在你的脚本中没有看到任何使用你的数据价格属性的东西，那么你是如何计算的呢？
相关文章：
- 如何在HTML中制作带导航的表格
- 从横向格式的HTML页面制作PDF
- 我可以在HTML中制作一个可调整的数组列表吗
- 如何使用嵌入的HTML元素制作d3.js工具提示
- HTML:如何制作剪裁排版
- 有没有办法使用画布或其他方法在 HTML 中制作圆形图像
- 在 html 中制作可编辑的表格时，是否最好将表格内容保留在数组中
- 需要帮助在 HTML 中制作标签页
- 将 HTML 表格制作为幻灯片/轮播
- 使用javascript在html中制作一个随机的图像/文本/url元素
- 使用JavaScript/HTML符号制作基本动画
- 在html中制作可移动菜单项
- HTML-如何制作一个“;阅读更多“;按钮
- 试图用javascript在html中制作一个按钮
- 如何使用html/css制作智能瓷砖
- 所以我在html中制作了一个按钮，不知道为什么这不起作用
- 如何使用HTML DOM制作表格
- 如何使用CSS和JavaScript/jQuery在HTML中制作自定义选择框
- HTML.如何制作空白页
- 如何使用html/JavaScript制作桌面应用程序
