Aktivieren der Größenanpassung in gelöschtem Element -Javascript

Ich habe ein jsPlumb-Element, das auf die Zeichenfläche gelegt wird. Sobald es gelöscht wurde, sollte der Benutzer die Größe ändern können. Ich habe versucht, eine css resize -Eigenschaft auf das Element fallen gelassen, aber es wird nicht angewendet.Aktivieren der Größenanpassung in gelöschtem Element -Javascript

CSS

.partitiondrop { 
    border: 1px solid #346789;

resize: both;

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

Drop-Funktion

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

dropPartition Funktion

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); 
}

Auch der Resizable-Code innerhalb der JS-Funktion hat keinerlei Auswirkungen

Aktuelles Element

ich für eine Resize Option möchte, wie unten gezeigt (ohne Scrollen - dh keine Überlaufkontrolle erforderlich), erscheint in der rechten unteren Ecke des Elements

Quelle

2016-07-29 Nayantara Jeyaraj

Sie suchen die CSS3-Eigenschaft: resize: both;.

Es wird derzeit im Internet Explorer nicht unterstützt, wie gesehen .

Quelle

2016-07-29 08:37:18

Ich benutze Chrome und Firefox nicht IE und ich habe auch die Größenänderung: beide in meinem CSS-Abschnitt wie oben gezeigt, aber es funktioniert nicht –

Sie vermissen '' overflow: auto'', um zu arbeiten . Siehe diese Geige: https://jsfiddle.net/yqdzp7dk/ –

Danke für die Demo. Ich habe die Überlaufeigenschaft hinzugefügt und jetzt erscheint das Größenänderungssymbol auf dem Element. Aber wenn ich versuche, das Element zu klicken und seine Größe zu ändern, wird es nur als Ganzes verschoben und nicht verkleinert. Könnte dies ein Problem sein, wenn das Element ziehbar ist? –

Dies kann mit der Bibliothek interact.js als Alternative erfolgen. Mit der folgenden Methode für das abgelegte Element, dessen Größe geändert werden muss, kann die Größenänderungsfunktion über interact.js aktiviert werden, und die ziehbare Funktion kann über jsPlumb selbst erlaubt werden.

Interact Resize-Funktion

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); 
    });

Die interact.js Datei muss auch aufgenommen werden. Weitere Informationen zur interact.js library finden Sie hier.

Quelle

2016-08-03 11:40:44

Aktivieren der Größenanpassung in gelöschtem Element -Javascript

Antwort

Verwandte Themen