Форум

dmivasant · #1 (**permalink**) 20.02.2014, 16:54

Задача такая: есть перетаскиваемые объекты и принимающий 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

dmivasant,
а sortable для принимающего див?
смотреть тут

dmivasant · #3 (**permalink**) 20.02.2014, 17:47

к сожелению нет. Принимающий div может быть разного размера и когда в него ложат картинку она должна остоваться там куда её положили.

рони · #4 (**permalink**) 20.02.2014, 18:17

Сообщение от dmivasant

Принимающий div может быть разного размера и когда в него ложат картинку она должна остоваться там куда её положили.

либо не делать appendTo либо вычислять top и left относительно принимающего див

рони · #5 (**permalink**) 20.02.2014, 20:06

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>

ruslan_mart · #6 (**permalink**) 21.02.2014, 11:08

Да ну, лучше Drag & Drop на чистом JS делать, а то юзать jQuery методы при каждом событии mousemove совсем не сахар.

dmivasant · #7 (**permalink**) 21.02.2014, 16:47

огромное спасибо, очень помогли.

dmivasant · #8 (**permalink**) 22.02.2014, 12:47

Почемуто в моем случаи не работает

. я поня что нужная мне строчка .css({"top": $(ui.helper).offset().top - 10, "left":$(ui.helper).offset().left}) но она отбрасывает перетаскиваемый элемент в право и вниз пикселей на 100. Почему так происходит?

рони · #9 (**permalink**) 22.02.2014, 13:32

dmivasant,
делайте макет с вашим html и css,js.

рони · #10 (**permalink**) 22.02.2014, 13:39

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

Форум

Справочник

Discord чат

Курсы javascript