ИЗБРАННЫЕ ПРИМЕРЫ JQUERY (теория и примеры)

HTML ↴

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>jQuery UI Droppable - Accept</title>
    <link rel="stylesheet" href="jquery-ui.css" />
    <script src="jquery-1.8.3.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    <style>
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
    #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
    </style>
    <script>
    $(function() {
        $( "#draggable, #draggable-nonvalid" ).draggable();
        $( "#droppable" ).droppable({
            accept: "#draggable",
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
                $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                        .html( "Dropped!" );
            }
        });
    });
    </script>
</head>
<body>
 
<div id="draggable-nonvalid" class="ui-widget-content">
    <p>I'm draggable but can't be dropped</p>
</div>
 
<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
    <p>accept: '#draggable'</p>
</div>
 
 
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

размер Kb

ПРИМЕР ↴

✔ пример в полном окне

на главную страницу примеров - клавиша ESC

ИЗБРАННЫЕ ПРИМЕРЫ JQUERY (теория и примеры)

document.write(document.title)

HTML ↴

размер Kb

ПРИМЕР ↴