jquery - 如何在 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

单击“保存凭证”后，只应显示已拖放到此处的内容

感谢您的帮助

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

在此处查看演示:

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

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

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