ブロガーのjqueryのドロップ可能でドラッグ可能な機能の使用

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