перетащите изображение в контейнер - PullRequest
Новая
       34

перетащите изображение в контейнер

2 голосов
/ 16 марта 2011

Я могу повернуть клон изображения, но он переместился за пределы div. Можно ли показать, что поворот изображения внутри div. вот ссылка для jsfiddle: http://jsfiddle.net/T6nn5/5/ но плагин поворота здесь не включен, поэтому изображение не будет вращаться.

Ответы [ 2 ]

3 голосов
/ 16 марта 2011

Мне кажется, проблема в том, что страница настроена так, что пользователь перетаскивает клон изображения на сетку.Когда вы нажимаете на изображение, вызывается плагин поворота, который заменяет это изображение на <span><canvas><canvas></span> (по крайней мере, в Firefox).По этой причине перетаскивание перестало функционировать.

Изображение позиционируется с использованием «абсолютного» позиционирования, а холст позиционируется с помощью «относительного» позиционирования, и поэтому он оказывается ниже сетки.

Я не проверял это, но я думаю, что решение будет заключаться в том, чтобы обернуть изображение в <span>, к которому применена функция перетаскивания.Я не знаю, будет ли повернутый холст еще раз обернут относительно 100 *.Так что могут возникнуть проблемы с позиционированием даже после предлагаемого изменения.

В примечании, при нажатии на холст, Firebug сообщает об этой ошибке:

$ (this) .rotate({angle: test, сдерживание: "рабочая область"}). parent не является функцией [Break On This Error] Не удалось загрузить источник для: http://usha. .. ng_Conveyors / build.php? num1 = 50 & num2= 50 build .... num2 = 50 (строка 624)

Обновление: Итак, Обновленная демоверсия икод:

HTML 

<li>
    <span class="draggable">
        <img class="rotatable" src="http://www.bootheyankees.com/images/GoogleIcon.png"/>
    </span>
</li>

скрипт 

$(document).ready(function() {
    $('#dhtmlgoodies_xpPane .draggable').draggable({
        scope: "draggable",
        helper: "clone"
    });
    $('#working-area .rotatable').live('click', function(event) {
        test = test + 90;
        $(this).rotate({
            angle: test,
            containment: "working-area"
        });
    });
    $("#working-area").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: "#dhtmlgoodies_xpPane li .draggable",
        drop: function(event, ui) {
            $(this).append($(ui.helper).clone().draggable());

        },
        scope: "draggable"
    }).mousemove(function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $('#status2').html("X = " + x + ', ' + "Y = " + y);
    });
});
0 голосов
/ 16 марта 2011

Когда вы перетаскиваете изображение, ваш стиль - position: absolute; left: 745.5px; top: 788px;, после нажатия на это изображение стиль - position: relative; left: -0.310859px; top: -43.3109px;.Я не знаю, что делает ваш плагин, но я думаю, что вы должны написать свой собственный код jquery.и это, безусловно, вызывает ошибку.

...