javascript - 拖动 td 不会触发 droppable 事件
问题描述
我正在尝试将 td 放入另一列中的 div 中。当我将 td 放入时,droppable 事件不会触发;没有向控制器发出请求。我在这里做错了什么?
jQuery/Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('#listProducts td').css({ 'z-index': 100 }).draggable({
'opacity': '0.5',
'revert': true,
'cursor': 'pointer'
});
function displayCart(data) {
var s = '';
for (var i = 0; i < data.length; i++) {
s += '<br><video style="width:250px; height:150px;" src=' + data[i].Workout.link + ' controls> </video>';
s += '<br>Name: ' + data[i].Workout.Name;
s += '<br><a href="#?productIdCart=' + data[i].Workout.workout_id + '" class="delete">Delete</a>';
s += '<br>--------------------------';
}
$('#cart').html(s);
}
$('#cart').droppable({
drop: function (event, ui) {
var productId = $(ui.draggable).siblings('.productId').val();
$.ajax({
type: 'GET',
url: 'Workouts/AddToCart/' + productId,
success: function (data) {
displayCart(data);
},
failure: function (data) {
alert('failure');
}
});
}
});
// Delete Item
$('#cart').ajaxComplete(function () {
$('.delete').bind('click', function () {
var productIdCart = $(this).attr('href').split('=');
$.ajax({
type: 'GET',
url: 'Workouts/DeleteFromCart/' + productIdCart[1],
success: function (data) {
displayCart(data);
}
});
});
});
$("#btnshowmodal").click(function () {
$("#loginmodal").modal('show');
});
$("#btnhidemodal").click(function () {
$("#loginmodal").modal('hide');
});
});
html代码:
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="modal fade" tabindex="-1" id="loginmodal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="column">
<div class="form-group">
<div style="float:left; margin-right:10px;" id="listProducts">
<table cellpadding="2" cellspacing="2" border="1">
<tr>
<th>Name</th>
<th>Video</th>
</tr>
@foreach (Workout workout in Model.TemplateWorkouts)
{
<tr>
<td>@workout.Name
<input type="hidden" class="productId" value="@workout.workout_id" /></td>
<td>
<video style="width:250px; height:150px;" src="@Url.Content(workout.link)" controls>
Your browser does not support the video tag.
</video>
</td>
</tr>
}
</table>
</div>
</div>
</div>
<div class="column">
<div id="cart" style="width:200px; min-height:200px; border:1px solid red;margin-left:300px; padding:5px;">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
@*<button type="submit" class="btn btn-primary button button4">apply template</button>
<button type="button" id="btnhidemodal" class="btn btn-primary button button4">
hide
</button>*@
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
在锻炼控制器中:
public ActionResult AddToCart(string id)
{
if (Session["cart"] == null)
{
List<Item> cart = new List<Item>();
cart.Add(new Item {Workout = new OPPDBContext().Workouts.Where(p=>p.workout_id == Convert.ToInt32(id)).FirstOrDefault() });
Session["cart"] = cart;
}
else
{
List<Item> cart = (List<Item>)Session["cart"];
int index = isExist(id);
if (index != -1)
index = 0;
else
cart.Add(new Item { Workout = new OPPDBContext().Workouts.Where(p => p.workout_id == Convert.ToInt32(id)).FirstOrDefault() });
Session["cart"] = cart;
}
return Json((List<Item>)Session["cart"], JsonRequestBehavior.AllowGet);
}
public ActionResult DeleteFromCart(string id)
{
List<Item> cart = (List<Item>)Session["cart"];
int index = isExist(id);
cart.RemoveAt(index);
Session["cart"] = cart;
return Json((List<Item>)Session["cart"], JsonRequestBehavior.AllowGet);
}
private int isExist(string id)
{
List<Item> cart = (List<Item>)Session["cart"];
for (int i = 0; i < cart.Count; i++)
if (cart[i].Workout.workout_id.Equals(id))
return i;
return -1;
}
这些方法在任何时候都没有受到影响。我已经通过在添加到购物车方法中设置断点来确认这一点。
解决方案
该请求是针对 Workouts/Workouts/AddToCart/Id 提出的。我通过从 Workouts/AddToCart 中删除 Workouts 来解决此问题。为了得到正确的Id值,我把js代码改成如下:
$('#cart').droppable({
drop: function (event, ui) {
var productId = $(ui.draggable).children('.productId').val();
$.ajax({
type: 'GET',
url: 'AddToCart/' + productId,
success: function (data) {
displayCart(data);
},
failure: function (data) {
alert('failure');
}
});
}
});
推荐阅读
- r - 如何从R中的向量计算任意两个分数之间的平均绝对差
- perl - 在 perl 脚本中使用代理服务器
- javascript - 选择输入类型为:file (pdf) 的本地文件并将其转换为 base64 字符串
- angular - 根据条件显示不同的视图
- dropbox-api - `folderselect` 似乎不适用于带有 Dropbox 选择器的移动设备
- python - Python中的SET数据结构:奇怪的行为
- java - 如何在java中将此十六进制字符串转换为unicode?
- java - 多态PApplet处理NullPointerException
- python - 使用 optparse 或 argparse 处理使用相同选项的多个参数
- r - 从 R 中的 rollapply 函数转移运行平均输出