Я пытаюсь использовать jQuery Ui для сортировки некоторых элементов с помощью Drag and Drop.jQuery UI Drag/Droppable проблема с анимацией
Если один элемент пропускает зону падения, зона падения должна расширяться. Это работает хорошо. Но моя проблема заключается в том, что атрибуту event.target.clientWidth все равно 25. Таким образом, dropzone все еще составляет 25 пикселей, а контейнер - уже 250px.
Я не знаю, как изменить его (я Allready пытался 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