Drag and Drop - JavaScript, Ajax

s88s · 01.11.2019, 11:53

Доброго времени суток!

Подскажите как сделать так что бы при перетаскивании объекта сохранялся его клон в Drop друг за другом?

Вот что у меня сейчас на данный момент получилось

Код:


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>New Web Project</title>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

        <style>         
        body{
            margin:0;
            padding:0;
        }
        .box{
            display:block;
            width:100px;
            height:50px;
            background-color:green;
            border:1px solid #000;
        }
        #drop{
            position:absolute;
            top:220px;
            left:220px;
            width:550px;
            height:250px;
            border:1px solid red;
            background:yellow;
        }
}

        </style>
        <script type="text/javascript">
        $(document).ready(function(){

$('.test') .draggable({
cursor:'pointer',
handle:'h2',
helper:'clone',
revert:'invalid',
containment:'#drop',
revertDuration:1500
});

$('#drop').droppable({

accept:'.test',

drop: function(event, ui) {

var clone = ui.draggable.clone();

$('#drop').append(clone);

$( "#drop .test" ).click(function(){
	    $(this).remove();
	  });
}
});

            $('#boxBesar p').each(function(index,element){
                $('#boxBesar p:eq('+index+')').css({
                    'border':'1px solid #000',
                    'width':'100px',
                    'height':'100px',
                    'position':'absolute',
                    'left':(index*100)+10,
                    'z-index':index+2,
                    'color':'black',
                    'text-align':'center',
                    'background':'#ccc'
                });
            });
        });
        </script>
    </head>

    <body>
        <div id="boxBesar">
            <p id="b1" class="test">Box 1</p>
            <p id="b2" class="test">Box 2</p>
        </div>

        <div id="parent">
            <div id="drop" >

            </div>
        </div>
    </body>

</html>

Desc · 01.11.2019, 12:57

Т. е. к примеру, первым перетащили Box 2, значит и позицию должен занять первую а не вторую. Так хотите сделать?

s88s · 01.11.2019, 13:04

Мне надо что бы все блоки встали в порядке переноса и что бы я мог перенести любой из блоков несколько раз

01.11.2019, 12:57	#2
Desc Участник клуба Регистрация: 21.11.2007 Сообщений: 1,063	Т. е. к примеру, первым перетащили Box 2, значит и позицию должен занять первую а не вторую. Так хотите сделать? I am not a wizard, I am just learning.

01.11.2019, 13:04	#3
s88s Форумчанин Регистрация: 02.01.2014 Сообщений: 369	Мне надо что бы все блоки встали в порядке переноса и что бы я мог перенести любой из блоков несколько раз "Я не волшебник, я только учусь"

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Drag&Drop в XNA	MyXa	C# (си шарп)	0	06.01.2013 14:31
Drag&Drop NO MFC! NO MFC!	Антоним	Win Api	1	12.11.2012 21:43
Drag And Drop	Adyvan	C# (си шарп)	0	04.03.2012 06:27
Drag and Drop	nusik	Общие вопросы C/C++	2	09.07.2009 11:09
Нужна помощь (Drag-And-Drop & Drag-Abd-Dock))	Arkuz	Общие вопросы Delphi	1	18.04.2009 00:15