jQuery UI:如何在排序或拖动时将元素转换为圆形

时间:2017-05-18 11:41:31

标签: javascript jquery sorting jquery-ui

我想知道我可以将元素转换为圆形,同时对其进行排序或拖动(元素),包括其子元素。我试过但不完整。

$('#editorDesignView').sortable({
       cursor: 'move',
     start: function( event, ui ) {
        $(ui.item).addClass("sortable-change");
     },
     stop: function( event, ui ) {
        $(ui.item).removeClass("sortable-change");
     }
});

更新:

$('#editorDesignView').sortable({
        // opacity: 0.6,
        handle: ".draggable-area",
        cursor: 'move',
        start: function( event, ui ) {
            $(ui.item).addClass("on-sortable-change");
        },
        stop: function( event, ui ) {
            $(ui.item).removeClass("on-sortable-change");
        }
    });

My jsfiddle link

1 个答案:

答案 0 :(得分:4)

不是通过应用CSS转换元素,而是实现目标的标准方法。其内容如下:

{
  "content": [
    {
      "vendorId": 23,
      "name": "vendorname",
      "details": details,
      "table2": [
                 {
                  "id" :1,
                 "cityId":1,
                 },
                  "id" :2,
                  "cityId" : 3
                ]
    },
   {....}
]
}

我们可以在初始化$('#editorDesignView').sortable({ cursor: 'move', helper: function(){ return $("<div class='sortable-change'></div>"); }, cursorAt: { left: -60, top: 20 } }); 时使用helper选项和cursorAt选项

可在此处查看更新的codepen:http://codepen.io/anon/pen/QvVRgz