Jquery сортируемый на элементе SVG

Question

Jquery сортируемый на элементе SVG

0

Я пытаюсь реализовать JQuery Sortable на элементе SVG. Я создал это через D3, но теперь это выходит за рамки D3. Это для окончательного вывода. К сожалению, что-то не так, по какой-то причине бары не сортируются.

Пожалуйста, посмотрите здесь пример jsfiddle

Моя конечная цель - перетащить один из столбцов в <ul> и превратить его в элемент <li>

У меня есть следующий javascript:

$('#varchart').sortable();
$('#varchart').disableSelection();

Что работает в следующем HTML:

<svg class="chart foox" id="varchart" width="373" height="90">
    <g class="ui-state-default">
        <rect class="dragrect" height="20" y="60" x="5" width="9.098591549295774" style="fill: #3261ab; opacity: 0.9; shape-rendering: crispedges; fill-opacity: 0.4;"></rect>
    </g>
    <g class="ui-state-default">
        <rect class="dragrect" height="20" y="20" x="5" width="323" style="fill: #3261ab; opacity: 0.9; shape-rendering: crispedges; fill-opacity: 0.4;"></rect>
    </g>
</svg>

Я следовал примеру в этой ссылке: jsfiddle - example

благодаря

Paul 29 март 2014, в 08:46

Источник

0

не сработает! SVG будет отображаться непосредственно браузером. Вы не можете обрабатывать определенный пользовательский ввод в SVG Elements.
Adrian Preuss 30 март 2014, в 18:18

Теги:

javascript

jquery

svg

jquery-ui-sortable

1 ответ

Ещё вопросы

не сработает! SVG будет отображаться непосредственно браузером. Вы не можете обрабатывать определенный пользовательский ввод в SVG Elements.

Roberto · Accepted Answer · 2014-03-30T17-23-00.000Z

Я не уверен в полном поведении, которое вы ожидаете, но следующий JSFiddle может вам помочь.

http://jsfiddle.net/pFyX8/5/

Если вы хотите "уничтожить" SVG после того, как активировано действие перетаскивания, вы можете сделать это вручную. Я имею в виду, что если один и тот же элемент нельзя перетаскивать дважды, когда инициируется действие перетаскивания элемента, исходный элемент SVG должен быть уничтожен или скрыт. В моем примере один и тот же объект можно перетаскивать много раз

Элемент SVG не может перемещаться (перетаскиваться) из тега SVG, поэтому при перетаскивании вам необходимо создать элемент HTML, который используется как "реальный перетаскиваемый объект", в моем коде. Это div.

Это код, инициирующий действие перетаскивания:

$('.dragrect')
  .bind('mousedown', function(event, ui){
      event.preventDefault();  
      window.myDraggedElement = $('<div/>').prop('id', 'mydrag').css({
          position: 'absolute',
          cursor: 'pointer',
          width: $(event.target).attr('width'),
          height: 20,
          left: event.pageX - 2,
          top: event.pageY -2 ,
          backgroundColor: '#aaf',
          'z-index': 1000
      }).draggable();
      console.log(myDraggedElement);
      $('body').append(myDraggedElement);
      myDraggedElement.trigger(event);
  });

Когда объект отбрасывается, перетаскиваемый элемент вставляется в элемент <li>.

Это код, который управляет действием drop:

$('.square').droppable({ accept: "#mydrag" });

$('.square').on('drop', function(ev) {
    event.preventDefault();  
    event.stopPropagation();
    var newItem = $('<li/>').append(myDraggedElement);
    myDraggedElement.css({'position': 'static'});
    myDraggedElement.draggable( 'destroy' )
     $('.accept').append(newItem);
    myDraggedElement = null;
});