jQuery UI Drag/Droppable 动画问题

Question

我正在尝试使用 jQuery Ui 通过拖放对某些项目进行排序。

如果一个元素通过 dropzone，则 dropzone 应该扩展。这很好用。但我的问题是 event.target.clientWidth 的属性仍然是 25。所以 dropzone 仍然是 25px，而容器已经是 250px。

我不知道如何更改它（我已经尝试过 event.target.clientWidth = 250 但这不起作用）并希望你能帮助我

这是我的代码的一部分：

HTML：

<section id="plot" class="plot">
        <div class="cards">
            <div id="card__container" class="card__container" style="width: 1392px;">
                <div class="card__dropzone">
                    <div class="card__dropzone--inner"></div>
                </div>
                    <div><div class="card ui-widget-content" id="card1">
                        <span class="card__id">1</span>
                        <span class="card__text">Hektor runs away followed by police</span>
                    </div>
                </div>
                <div class="card__dropzone">
                    <div class="card__dropzone--inner"></div>
                </div>
                <div><div class="card ui-widget-content" id="card2">
                    <span class="card__id">2</span>
                    <span class="card__text">Hektor stumbles and falls</span>
                </div></div>

                <div class="card__dropzone">
                    <div class="card__dropzone--inner"></div>
                </div>
                <div><div class="card ui-widget-content" id="card3">
                    <span class="card__id">3</span>
                    <span class="card__text">Hektor get catched by police and trys to bluff hisself out</span>
                </div></div>

                <div class="card__dropzone">
                    <div class="card__dropzone--inner"></div>
                </div>
                <div><div class="card ui-widget-content" id="card5">
                    <span class="card__id">5</span>
                    <span class="card__text">Hektor did say something stupid</span>
                </div></div>

                <div class="card__dropzone">
                    <div class="card__dropzone--inner"></div>
                </div>
                <div><div class="card ui-widget-content" id="card4">
                    <span class="card__id">4</span>
                    <span class="card__text">Police a bit confused and believes him</span>
                </div></div>

                <div class="card__dropzone">
                    <div class="card__dropzone--inner"></div>
                </div>
                <div><div class="card ui-widget-content" id="card6">
                    <span class="card__id">6</span>
                    <span class="card__text">Police arrested him</span>
                </div>
                </div>
            </div>
        </div>
    </section>

CSS：

.card {
            cursor: pointer;
        }
        .plot {
            overflow-y: hidden;
            overflow-x: visible;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100vw;
            padding-top: 25%;
        }
        .cards {
            position: relative;
            left: 0;
            right: 0;
            margin: auto;
        }
        .card__container {
            left:0;
            right: 0;
            margin: 25px auto;
            height: 100%;
            display: table;
        }
        .card {
            margin-top: 50px;
            width: 200px;
            height: 150px;
            border: 1px solid #d3d3d3;
            display: table-cell;
        }
        .card__dropzone--inner {
            width: 25px;
            height: 150px;
        }
        .card__id {
            font-size: 1.5em;
            font-weight: bold;
            display: block;
            padding: 10px;
        }
        .card__text {
            display: block;
            padding: 10px;
            font-family: sans-serif;
        }
        .card__dropzone {
            display: table-cell;
            vertical-align: top;
        }
        .card__dropzone--active {
            background: blue;
            box-shadow: 0 0 10px blue;
        }

Javascript：

$(document).ready(function() {
    $(".card").draggable({   helper: "clone",
                             revert: true,
                             opacity: 0.5,
                             scroll:true,
                             scrollSensitivity: 100});
    $(".card__dropzone--inner").droppable({
        activeClass: "card__dropzone--active",
        over: function(event) {
            $(this).animate({
                width: "250px"
            }, 200);
            event.target.clientWidth = 250;
            console.log("over");
        },
        out: function(event) {
            console.log("now?!");
            $(event.target).animate({
                width: "25px"
            },200);
            event.target.clientWidth = 25;
            console.log("out");
        },
        drop: function(event) {
            console.log("drop");
        }
    });
});

这是我的 jsfiddle

http://jsfiddle.net/qthrvt8s/

Answer 1

您必须在初始化 .draggable() 时添加 refreshPositions: true 以告诉您的可放置区域考虑新尺寸：

$(document).ready(function() {
    $(".card").draggable({   helper: "clone",
                             revert: true,
                             opacity: 0.5,
                             scroll:true,
                             refreshPositions: true,
                             scrollSensitivity: 100});
    $(".card__dropzone--inner").droppable({
        activeClass: "card__dropzone--active",
        over: function(event) {
            $(this).animate({
                width: "250px"
            }, 200);
            console.log("over");
        },
        out: function(event) {
            console.log("now?!");
            $(event.target).animate({
                width: "25px"
            },200);
            console.log("out");
        },
        drop: function(event) {
            console.log("drop");
        }
    });
});

请看updated fiddle