Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.02.2014, 16:54
Аспирант
Отправить личное сообщение для dmivasant Посмотреть профиль Найти все сообщения от dmivasant
 
Регистрация: 17.07.2013
Сообщений: 47

Drag and Drop
Задача такая: есть перетаскиваемые объекты и принимающий div. Перетаскивание происходит клона, а не самого элемента и добавляется в принимающий div методом .appendTo, а как можно сделать чтоб при добавлении он не вставал в конец или в начало (другим методом), а оставался там, куда его положили. Тоесть если я перетаскиваемый элемент ложу в центр div то он там и остается, и при этом откуда я его перетаскивал должен остаться оригинал объекта.
вобще возможно ли так сделать?
У меня получился вот такой замудренный код.
// перетаскивание
$('div[id*=element]').draggable({
    containment: "#wraper",
    revert: "invalid",
    grid: [20, 20],
    opacity: 0.5,
    scroll: false,
    zIndex: 35,
    appendTo: "body",
    helper: "clone",
    cursor: "move",
    stack: "div[id*=element] > img"
}).find('img').css({
    'width': '50%',
        'height': '50%'
});
//приемник
$("#contener").droppable({
    accept: "#saitbar > #left > #accordion > .dropp > div[id*=element]",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        var element = $(ui.draggable);
        element.fadeIn(1000, function () {
            $(this).clone()
                .addClass("newElement")
                .appendTo("#contener")
                .draggable({
                containment: "#contener",
                opacity: 0.5,
                stack: "div[id*=element]",
                cursor: "move"
            })
                .resizable({
                containment: "#contener",
                /*aspectRatio:true*/
            })
                .find('img').animate({
                'width': '100%',
                    'height': '100%'
            }, 100)

        });
Ответить с цитированием
  #2 (permalink)  
Старый 20.02.2014, 17:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dmivasant,
а sortable для принимающего див?
смотреть тут
Ответить с цитированием
  #3 (permalink)  
Старый 20.02.2014, 17:47
Аспирант
Отправить личное сообщение для dmivasant Посмотреть профиль Найти все сообщения от dmivasant
 
Регистрация: 17.07.2013
Сообщений: 47

к сожелению нет. Принимающий div может быть разного размера и когда в него ложат картинку она должна остоваться там куда её положили.
Ответить с цитированием
  #4 (permalink)  
Старый 20.02.2014, 18:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от dmivasant
Принимающий div может быть разного размера и когда в него ложат картинку она должна остоваться там куда её положили.
либо не делать appendTo либо вычислять top и left относительно принимающего див
Ответить с цитированием
  #5 (permalink)  
Старый 20.02.2014, 20:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

draggable droppable клонирование блоков
dmivasant,
Вариант решения ...
Сообщение от dmivasant
оставался там, куда его положили
тащим блоки на цветной квадрат - если нужно корректируем положение упавшего блока
-10 коррекция margin
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style type='text/css'>
  .wrapper{margin:20px auto}
  #block1,#trash{border:solid 1px #555555;margin:10px;padding:20px;-moz-border-radius:5px;-webkit-border-radius:5px;float:left;height:335px ;min-width:100px}
  .textBlock{cursor: pointer;border:solid 1px #333333;font-weight:bold;margin:10px 0 5px 0;padding:10px;text-align:center;background:#eee;-moz-border-radius:3px;-webkit-border-radius:3px}
  #trash{padding:0px;
    width:335px;height:335px ;
    background-color: #4169E1;
  }
  #trash div{
      width:40px;height:40px ;
      background-color:  #DEB887;
      position:   absolute;
  }
  </style>
<script type='text/javascript'>
$(window).load(function () {
    $("#block1 .textBlock").draggable({
        helper: "clone",
        appendTo: "#trash"
    });
   $("#trash").droppable({
        accept: "#block1 .textBlock",
        drop: function (event, ui) {
            var element = $(ui.draggable).clone();
            element.css({"top": $(ui.helper).offset().top - 10, "left":$(ui.helper).offset().left})
            element.appendTo("#trash")
            element.draggable({ containment:"#trash", scroll:false });
        }
    })
});
</script>
</head>
<body>
      <div class="wrapper">
        <div id="block1" class="">
            <div class="textBlock ui-state-default">Блок 1</div>
            <div class="textBlock ui-state-default">Блок 2</div>
            <div class="textBlock ui-state-default">Блок 3</div>
			<div class="textBlock ui-state-default">Блок 4</div>
            <div class="textBlock ui-state-default">Блок 5</div>
            <div class="textBlock ui-state-default">Блок 6</div>
        </div>
        <div id="trash" class=""></div>
     </div>
</body>
</html>

Последний раз редактировалось рони, 01.08.2015 в 10:01.
Ответить с цитированием
  #6 (permalink)  
Старый 21.02.2014, 11:08
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Да ну, лучше Drag & Drop на чистом JS делать, а то юзать jQuery методы при каждом событии mousemove совсем не сахар.
Ответить с цитированием
  #7 (permalink)  
Старый 21.02.2014, 16:47
Аспирант
Отправить личное сообщение для dmivasant Посмотреть профиль Найти все сообщения от dmivasant
 
Регистрация: 17.07.2013
Сообщений: 47

огромное спасибо, очень помогли.
Ответить с цитированием
  #8 (permalink)  
Старый 22.02.2014, 12:47
Аспирант
Отправить личное сообщение для dmivasant Посмотреть профиль Найти все сообщения от dmivasant
 
Регистрация: 17.07.2013
Сообщений: 47

Почемуто в моем случаи не работает . я поня что нужная мне строчка .css({"top": $(ui.helper).offset().top - 10, "left":$(ui.helper).offset().left}) но она отбрасывает перетаскиваемый элемент в право и вниз пикселей на 100. Почему так происходит?
Ответить с цитированием
  #9 (permalink)  
Старый 22.02.2014, 13:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dmivasant,
делайте макет с вашим html и css,js.
Ответить с цитированием
  #10 (permalink)  
Старый 22.02.2014, 13:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dmivasant,
19 строка --- укажите position: absolute новым блокам или добавьте в 32 строку

Последний раз редактировалось рони, 22.02.2014 в 13:42.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Drag and Drop, Grids, MVC Pro100tom Элементы интерфейса 0 25.07.2013 12:05
drag & drop , html 5 cyber Events/DOM/Window 1 30.06.2012 15:16
Помогите с drag and drop shtopor jQuery 1 20.02.2012 13:26
Разбираюсь с drag and drop uaNikita Events/DOM/Window 4 22.09.2011 11:25
Drag & Drop с несколькими элементами Katz Общие вопросы Javascript 1 29.07.2011 13:01