Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
    
<head>
    <meta charset=utf-8>
    <title>JS Bin</title>
</head>
<body>
    <p>
        Click and drag the <code>&lt;div&gt;</code> below to see the HTML5
        <code>draggable</code> attribute in action, or grab the resize
        handle at the bottom-right of the <code>&lt;div&gt;</code> to see
        the CSS <code>resize</code> property in action.
    </p>
    <div draggable="true" class="resizable">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere similique itaque fuga animi blanditiis quae autem nihil aut perferendis aliquid eum in commodi vitae. Nihil ducimus enim ad nam facere.</div>
</body>
</html>
 
code {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 2px;
    background: #ddd;
}
div {
    width: 100px;
    height: 100px;
    background: orange;
}
[draggable=true] {
    cursor: move;
}
.resizable {
    overflow: scroll;
    resize: both;
    max-width: 300px;
    max-height: 460px;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
creativitypro
0viewers