2014-01-27 3 views
-3

Есть ли способ перемещения, например. входной тег html с Drag & Drop? (JQuery)Как перемещать элементы HTML с помощью drag & drop

нравится этот сайт здесь: click

Вы можете взять ваш HTML-теги из списка на левой стороне, и вы можете перемещать элементы внутри коробочку ...

+1

Да, есть способ. Почему вы сначала не проводили поиски? Есть так много результатов для этого, вам не нужно было задавать вопрос ... – Ryan

+0

Вы можете использовать любой редактор HTML. –

ответ

2

может быть вы должны посмотреть на jQuery UI, который имеет встроенное сопротивление & drop fonctionality

1

Просто взгляните на this overview. Но я думаю, что вы ищете Droppables: Принимая перетаскиваемые элементы.

Это пример с веб-страницы и не от меня:

<!doctype html> 
<html lang="en"> 
    <head> 

    <style> 
    #makeMeDraggable { float: left; width: 300px; height: 300px; background: red; } 
    #makeMeDroppable { float: right; width: 300px; height: 300px; border: 1px solid #999; } 
    </style> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 

    <script type="text/javascript"> 

    $(init); 

    function init() { 
    $('#makeMeDraggable').draggable(); 
    $('#makeMeDroppable').droppable({ 
     drop: handleDropEvent 
    }); 
    } 

    function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
    alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!'); 
    } 

    </script> 

    </head> 
<body> 

<div id="content" style="height: 400px;"> 

    <div id="makeMeDraggable"> </div> 
    <div id="makeMeDroppable"> </div> 

</div> 

</body> 
</html> 
Смежные вопросы