0

Здравствуйте люди добрые. Помогите разобраться. Есть левая колонка в которой находиться картинки и они могут быть перетаскиваемы .draggable и есть основной контент который принимает те самые картинки .droppable, картинки клонируются в контент методом clone и снова стают перетаскиваемые. Но проблема в том что когда они перетаскиваются в контенте они продолжают клонироваться. А это мне совсем не нужно. Как исправить код?

html код

<div id="wraper">
  <div id="heder"></div>
  <div id="saitbar">
    <div id="element1" ><img src="images/1.png" width="100" height="100" alt="подсказка" /></div>
    <div id="element2" ><img src="images/2.png" width="100" height="100" alt="подсказка" /></div>
    <div id="element3" ><img src="images/3.png" width="100" height="100" alt="подсказка" /></div>
    <!--<div id="element4" ><img src="images/1.png" width="100" height="100" alt="подсказка" /></div>
    <div id="element5" ><img src="images/2.png" width="100" height="100" alt="подсказка" /></div>
    <div id="element6" ><img src="images/3.png" width="100" height="100" alt="подсказка" /></div>
    <div id="element7" ><img src="images/1.png" width="100" height="100" alt="подсказка" /></div>
    <div id="element8" ><img src="images/2.png" width="100" height="100" alt="подсказка" /></div>
    <div id="element9" ><img src="images/3.png" width="100" height="100" alt="подсказка" /></div>-->
  </div>
  <div id="content">
    <div id="contener" class="ui-widget-content"></div>
  </div>

js код

$(document).ready(function() { 
    // перетаскивание
    $('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]"
    });
    //приемник 
    $( "#contener" ).resizable().droppable({
        accept: "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()
            });
        }
    });
});
1
  • 2
    нажмите редактировать, выделите текст кода и нажмите {} повторяйте с вариациями, пока текст в preview не будет читабельным.
    – zb'
    10 июл 2013 в 4:12

1 ответ 1

2

Поправьте у droppable какие элементы принимаются, указав источник:

$( "#contener" ).resizable().droppable({
    accept: "#saitbar > div[id*=element]"
    ...
});
5
  • Спосибо огромное, очень помогли.
    – dmivasant
    11 июл 2013 в 0:30
  • не за что :) 11 июл 2013 в 15:01
  • Подскажите Павел, как можно сделать так чтобы контенер droppable можно было сахранять вмести совсе содержимым, которое в него накидали, на компьютер в виде картинки или pdf?
    – dmivasant
    15 июл 2013 в 9:02
  • Кусок html нельзя сохранить в виде картинки. Зато можно с помощью <canvas>, может быть вам больше подойдет он?
    – MrFranke
    15 июл 2013 в 9:14
  • @dmivasant: как сказал @MrFranke, напрямую сделать этого никак нельзя. 15 июл 2013 в 9:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.