Question

我已将此代码插入博客中的博客帖子中，但它不起作用。这件事在当地有效。我错过了什么吗？你能帮我解决一下吗？可以在博客中实现可拖动和可拖放吗？您对该解决方案有其他建议吗？

    <style>
    .draggable{
    display: inline-block;
       }
    .draggable img{
     width:200px;
     height: 75px;
     }
     .droppable{
     display: inline-block;
     height: 75px;
     width: 200px;
     border: 1px solid grey;
     }
     .dominoes_mixed {
     margin-bottom: 20px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"     type="text/javascript"> </script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
    <div dir="ltr" style="text-align: left;" trbidi="on">
    <div class="dominoes">
    <div class="dominoes_mixed">
    <div class="draggable" data-id="a">
    <img border="0" src="https://2.bp.blogspot.com/-5vsKRyoAj8Q/WGQWu8Q-lkI/AAAAAAAAAHo/CgB4B939kCEw94LHg2_WVSTGxX9iOVLagCLcB/s320/black_hat.jpg"></div>
    </div>
    <div class="dominoes_arranged">
    <div class="droppable" data-id="a"></div>
    </div>
    </div>
    <script type="text/javascript">
    function MyScript() 
    {
    $(".draggable").draggable({ revert: 'invalid' });
    $(".droppable").droppable({ 
    accept: function(drag) {
        var dropId = $(this).attr('data-id');
        var dragId = $(drag).attr('data-id');
        return dropId === dragId;
    }
    });
    }
    </script>
    <br /></div>

Answer 1

您可以查看工作小提琴jsfiddle.net/bharatsing/te34ppkc/1/

$(document).ready(function(){
    $(".draggable").draggable({ revert: 'invalid' });
    $(".droppable").droppable({ 
    accept: function(drag) {
        var dropId = $(this).attr('data-id');
        var dragId = $(drag).attr('data-id');
        return dropId === dragId;
    }
    });
});

在博客中使用jquery的droppable和draragable函数

1 个答案: