Включить изменение размера в отброшенном элементе -Javascript

У меня есть элемент jsPlumb, который удаляется на холст, и после его удаления пользователь должен иметь возможность изменять его размер. Я пробовал иметь свойство resize css, помещенное на удаленный элемент, но оно не применяется.Включить изменение размера в отброшенном элементе -Javascript

CSS

.partitiondrop { 
    border: 1px solid #346789;

resize: both;

box-shadow: 2px 2px 19px #aaa; 
    ... 
    opacity: 0.8; 
    ... 
    z-index: 20; 
    position: absolute; 
    ...

падения Функция

var newAgent = $('<div>').attr('id', i).addClass('partitiondrop'); 
dropPartition(newAgent, i, e);

dropPartition Функция

function dropPartition(newAgent,i,e) 
{ 
    $(droppedElement).draggable({containment: "container"}); 
    var finalElement = newAgent; 
    $(finalElement).resizable({ 
      resize : function(event, ui) { 
      jsPlumb.repaint(ui.helper); 
     }, 
     handles: "all" 
    }); 


    finalElement.css({ 
     'top': e.pageY, 
     'left': e.pageX 
    }); 

    jsPlumb.draggable(finalElement, { 
    containment: 'parent' 
    }); 

    $('#container').append(finalElement); 
}

Даже Resizable код внутри функции JS не оказывает никакого влияния

Текущий элемент

Я хотел бы для опции изменения размера, как показано ниже (без прокрутки, т. е. не требуется управление переполнением), чтобы появиться в правом нижнем углу элемента

источник

2016-07-29 Nayantara Jeyaraj

Вы ищете свойства CSS3: resize: both;.

В настоящее время он не поддерживается в Internet Explorer, как видно here.

источник

2016-07-29 08:37:18

Я использую Chrome и Firefox, а не IE, и я также добавил изменение размера: как в моем разделе CSS, как показано выше, но он не работает –

Вам не хватает '' переполнение: auto'' для работы , Смотрите эту скрипту: https://jsfiddle.net/yqdzp7dk/ –

Спасибо за демонстрацию. Я добавил свойство переполнения, и теперь на элементе появится значок изменения размера. Но когда я пытаюсь щелкнуть и изменить размер элемента, он перемещается только в целом и не изменяется. Может ли это быть проблемой из перетаскиваемого элемента? –

Это может быть сделано с использованием библиотеки interactive.js в качестве альтернативы. Имея следующий метод для отбрасываемого элемента, который необходимо изменить, функция изменения размера может быть активирована через interactive.js, а функция draggable может быть разрешена через jsPlumb.

Взаимодействовать Resize Функция

interact('.partitiondrop') 
    .draggable({ 
     onmove: window.dragMoveListener 
    }) 
    .resizable({ 
     preserveAspectRatio: true, 
     edges: { left: true, right: true, bottom: true, top: true } 
    }) 
    .on('resizemove', function (event) { 
     var target = event.target, 
      x = (parseFloat(target.getAttribute('data-x')) || 0), 
      y = (parseFloat(target.getAttribute('data-y')) || 0); 

     // update the element's style 
     target.style.width = event.rect.width + 'px'; 
     target.style.height = event.rect.height + 'px'; 

     // translate when resizing from top or left edges 
     x += event.deltaRect.left; 
     y += event.deltaRect.top; 

     target.style.webkitTransform = target.style.transform = 
      'translate(' + x + 'px,' + y + 'px)'; 

     target.setAttribute('data-x', x); 
     target.setAttribute('data-y', y); 
     target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height); 
    });

interact.js файл должен быть включен, а также. Более подробную информацию о interact.js library можно найти здесь.

источник

2016-08-03 11:40:44

Включить изменение размера в отброшенном элементе -Javascript

ответ

Смежные вопросы