如何在droppable中拖动后更改类css

Question

我有以下代码：

jQuery(document).ready(function(){
    $('.dragThis').draggable({
        stop: function(event, ui) {
            var teste = $("#teste").offset();
            var pos = ui.helper.offset();
            $("#posX").val(pos.left - teste.left);
            $("#posY").val(pos.top - teste.top);

            var posX = $("#posX").val();
            var posY = $("#posY").val();
            $('#X').val(posX);
            $('#Y').val(posY);
        },
        containment: "parent",
        cursor: "move",
    });

    $('#dropHere').droppable({
        accept: '.dragThis',
        over: function(){
            $(this).animate({
                'border-width': '5px',
                'border-color': '#0f0'
            }, 200);
            $('.dragThis').draggable('option', 'containment', $(this));
        }
    });

在home.php中：

<div id="mydivcanvas">
    <div class="dragThis displayes">
        content 1
    </div>
    <div class="dragThis displayes">
        content 2
    </div>
    <div class="dragThis displayes">
        content 3
    </div>

    <ul class="dragThis displayes">
        <li>
            <span>
                <img id="imagem_teste" src="../uploads/imagens/.jpg" style="z-index:-1" >
            </span>
        </li>
    </ul>
    <div id="dropHere"></div>
</div>

<input type="button" id="save_voucher" value="Save Voucher" onclick="capture();" />

我想通过点击保存凭证来获取已被拖入#dropHere div的内容保留在课程.displayed中，但#dropHere以外的内容应更改为课程.displayed至.displano

单击“保存凭证”后，只显示已拖动的内容，应显示dropHere

感谢您的帮助

Answer 1

首先，我会说你有一个无效的标记，因为你已经为多个元素分配了相同的ID。根据标准，ID必须唯一地分配给每个元素。

因此，解决方案是改为上课，而不是：

<div class="dragThis displayes">
    content 1
</div>

并更改js：

$('.dragThis').draggable({
    // other code as is
});

您需要使用drop:fn回调：

$('#dropHere').droppable({
    accept: '.dragThis', // <----change to class selector
    over: function(){
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 200);
        $('.dragThis').draggable('option', 'containment', $(this));
    },
    drop:function(event, ui){
       $(ui.draggable).toggleClass('displayes displano'); //<---change the css class here.
       $(ui.draggable).siblings('.dragThis').hide(); // hide others as they are siblings
    }
});

在此处查看演示：

＆＃13;

＆＃13;

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $(ui.draggable).addClass('active');
      }
    });
  });

＆＃13;

#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.active{background:red !important; color:white !important;}

＆＃13;

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

通过在drop事件函数中编写代码，将任何随机类名放到被拖动的内容div中，并且在drophere div内部，这样在drophere div中的那些div可以在该类的基础上轻松选择，最后在按钮单击查找页面上没有这些类的所有内容div，一旦你有了这些div，你可以轻松删除和添加类。