Question

我正在尝试将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>

在WorkoutsController中：

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;
    }

该方法在任何时候都不会受到攻击。我已经通过在添加到购物车方法中设置一个断点来确认这一点。

Answer 1

已向“锻炼/锻炼/ 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');
                }
            });
        }
    });

拖动TD不会触发可投放事件

1 个答案: