gpt4 book ai didi

javascript - 拖放事件后添加图像样式

转载 作者:行者123 更新时间:2023-11-28 11:28:26 25 4
gpt4 key购买 nike

我在一个容器中有 5 个图像,我必须将它们放入另一个容器中才能完成图像。将图像放入另一个容器后,我想将 style="position:absolute"添加到该图像,以便该图像片段将粘贴到该容器中存在的前一个图像。

我能够实现拖放事件,但无法在拖放事件后添加 css 样式。这是 JSFiddle 链接,以便您可以帮助我 http://jsfiddle.net/binit/JnYB9/

<script>
$(function() {

$( "#sortable1" ).sortable({
connectWith: "div"
});

$( "#sortable2" ).sortable({
connectWith: "div"

});

$( "#sortable1, #sortable2" ).disableSelection();
});
</script>
<body>
<div class="row-fluid" >
<div class="span4">
<div class="span1"></div>
<div id="sortable1" class="well sidebar-nav sidebar-nav-fixed span11">
<legend>Collect Coupon parts</legend>
1st part
<img class="ui-state-highlight" src="{% static 'images/demo/north.png' %}" >
2nd part
<img class="ui-state-highlight" src="{% static 'images/demo/south.png' %}" >
3rd part
<img class="ui-state-highlight" src="{% static 'images/demo/east.png' %}" >
4th part
<img class="ui-state-highlight" src="{% static 'images/demo/west.png' %}" >
5th part
<img class="ui-state-highlight" src="{% static 'images/demo/center.png' %}" >
</div>
</div>
<div id="sortable2" class=" well sidebar-nav sidebar-nav-fixed span8">

<legend>Canvas section</legend>
</div>

最佳答案

试试这个,我只是在 sortable2 上使用回调 receive: 并将 css 应用于 img

jsfiddle

    $(function() {

$( "#sortable1" ).sortable({
connectWith: "div"
});

$( "#sortable2" ).sortable({
connectWith: "div",
receive: function(){
$("#sortable2 img").css('position','absolute');
}

});

$( "#sortable1, #sortable2" ).disableSelection();
});

关于javascript - 拖放事件后添加图像样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21260795/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com