我正在努力建立一个可拖动的网上商店。我创造了一切，除了左边的项目似乎没有拖到＆＃34;购物车＆＃34;在右边。
总价格也不会出现在购物车上。
有人知道如何解决这个问题吗？
我有一个小提琴。 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"
});
});
答案 0 :(得分：0)
您在小提琴中缺少jquery和jquery-ui脚本引用。 添加它们可以为您提供所需的可拖动功能。
http://jsfiddle.net/xBB5x/9974/
$(".draggable").draggable({
connectToSortable: "#container"
});
（此代码没有任何更改，只是在链接到小提琴时我需要包含代码）
我的脚本中没有使用您的数据价格属性查看任何内容，那么您是如何计算总数的呢？