问在blogger中使用jquery的可拖放函数

EN

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