jQuery UI draggable not bound to parent bounds

Question

I have created a js-based node editor. I have a div element I use as a parent for the nodes. Although I define the containment to parent you can move the nodes outside of the parents bounds. You can not move it lower than the last document element though.

The important html code is:

And the js for the draggable is:

$(this.domElement).draggable({
    containment: 'parent',
    cancel: '.connection,.output,.data',
    drag: function(event, ui){
        that.updatePosition();
    }
});

Maybe I did something wrong with the parenting so here it is as well:

this.domElement = document.createElement('div');
document.getElementById('node-container').appendChild(this.domElement);

I haven't worked with JavaScript too much and am still learning!

EDIT: Here is the definition of the node-container:

Complete StoryNode.js: https://hastebin.com/kiyoyekoce.js

// ===================================================================
// Node class. Represents a javascript version of the java Node class
// ===================================================================

var nodes = []; //Have second reduced node version running, maybe as a method in the Node? Call simple for loop in web-link

function StoryNode(name) {
    this.name = name;

    let that = this;

    nodes.push(this);

    // Add our graphical representation

    this.domElement = document.createElement('div');
    document.getElementById('node-container').appendChild(this.domElement);

    this.domElement.classList.add('node');
    this.domElement.classList.add('container-fixed');
    this.domElement.setAttribute('title', name.replace("Node",""));

    let remDom = document.createElement('div');
    remDom.classList.add('delete-node');
    remDom.innerHTML ='';
    this.domElement.appendChild(remDom);

    remDom.onclick = function (e) {

        that.detachAll();

        for( let i = 0; i < nodes.length; i++){
            if ( nodes[i] === that) {
                nodes.splice(i, 1);
            }
        }

        that.domElement.parentElement.removeChild(that.domElement);
    };

    // Add the node body

    // Directories
    var innerDomGroup = document.createElement('div');
    innerDomGroup.classList.add('row');
    this.domElement.appendChild(innerDomGroup);

    // Outputs
    this.outputDomGroup = document.createElement('div');
    this.outputDomGroup.classList.add('col-fixed-small-1');
    innerDomGroup.appendChild(this.outputDomGroup);

    // Inner Data
    this.dataDomGroup = document.createElement('div');
    this.dataDomGroup.classList.add('col-fixed-medium-1');
    innerDomGroup.appendChild(this.dataDomGroup);

    // Inputs
    this.inputDomGroup = document.createElement('div');
    this.inputDomGroup.classList.add('col-fixed-small-1');
    innerDomGroup.appendChild(this.inputDomGroup);


    //Node data
    this.inputs = [];
    this.data = [];
    this.outputs = [];
}

StoryNode.prototype.addInput = function(name, inputType){
    let input = new NodeInput(name, inputType);
    input.node = this;
    this.inputs.push(input);
    this.inputDomGroup.appendChild(input.domElement);

    return input;
};

StoryNode.prototype.addOutput = function(name, outputType){
    let output = new NodeOutput(name, outputType);
    output.node = this;
    this.outputs.push(output);
    this.outputDomGroup.appendChild(output.domElement);

    return output;
};

StoryNode.prototype.addData = function(name, outputType){
    let data = new NodeData(name, outputType);
    data.node = this;
    this.data.push(data);
    this.dataDomGroup.appendChild(data.domElement);

    return data;
};

StoryNode.prototype.ownsInput = function(input){
    for(let i = 0; i < this.inputs.length; i++){
        if(this.inputs[i] === input)
            return true;
    }
    return false;
};

Node.prototype.ownsOutput = function(output){
    for(let i = 0; i < this.outputs.length; i++){
        if(this.outputs[i] === output)
            return true;
    }
    return false;
};

StoryNode.prototype.detachAll = function(output){
    for(let item of this.inputs){
        if(item.output)
            item.output.detachInput();
    }

    for(let item of this.outputs){
        if(item.input)
            item.detachInput();
    }
};

StoryNode.prototype.updatePosition = function(){

    for(let j = 0; j < this.outputs.length; j++){
        if(this.outputs[j].input != null){
            let oP = this.outputs[j].getOutputPoint();
            let iP = this.outputs[j].input.getAttachPoint();

            let pStr = this.createPath(iP, oP);
            this.outputs[j].input.path.setAttributeNS(null, 'd', pStr);
        }
    }

    for(let j = 0; j < this.inputs.length; j++){
        if(this.inputs[j].output != null){
            let iP = this.inputs[j].getAttachPoint();
            let oP = this.inputs[j].output.getOutputPoint();

            let pStr = this.createPath(iP, oP);
            this.inputs[j].path.setAttributeNS(null, 'd', pStr);
        }
    }
};

StoryNode.prototype.createPath = function(a, b){
    let diff = {
        x: b.x - a.x,
        y: b.y - a.y
    };

    let pathStr = 'M' + a.x + ',' + a.y + ' ';
    pathStr += 'C';
    pathStr += a.x + diff.x / 3 * 2 + ',' + a.y + ' ';
    pathStr += a.x + diff.x / 3 + ',' + b.y + ' ';
    pathStr += b.x + ',' + b.y;

    return pathStr;
};

StoryNode.prototype.moveTo = function(point){
    this.domElement.style.top = point.y + 'px';
    this.domElement.style.left = point.x + 'px';
    this.updatePosition();
};

StoryNode.prototype.initUI = function(){
    let that = this;
    // Make draggable
    // noinspection JSValidateTypes
    $(this.domElement).draggable({
        containment: 'parent',
        cancel: '.connection,.output,.data',
        drag: function(event, ui){
            that.updatePosition();
        }
    });

    //Mak node design smaller as it holds no data inputs
    if(this.data.length === 0) {
        this.domElement.classList.remove('container-fixed');
        this.domElement.classList.add('container-fixed-min');

        this.dataDomGroup.classList.remove('col-fixed-medium-1');
        this.dataDomGroup.classList.add('col-fixed-medium-1-min');
    }

    // Fix positioning
    this.domElement.style.position = 'absolute';

    document.body.appendChild(this.domElement);
    // Update Visual
    this.updatePosition();
};

// Node 1
let node = new StoryNode('Page');


// Move to initial positions
node.moveTo({x: 150, y: 20});

// Connect Nodes


// Add to DOM
node.initUI();

Twisty · Accepted Answer

I suspect that the issue is when you append the element. If it's not appended when you initialize draggable, it may not understand the parent relationship.

Consider the following example:

$(function() {
  function addNode(title, content, tObj) {
    if (title == undefined) {
      title = "New Node";
    }
    if (content == undefined) {
      content = "";
    }
    if (tObj == undefined) {
      tObj = $("#node-container");
    }
    var node = $("", {
      class: "node-element"
    }).appendTo(tObj);

    $("", {
      class: "node-title"
    }).html(title).appendTo(node);

    $("", {
      class: "btn btn-delete-node"
    }).html("x").click(function() {
      var r = confirm("Are you sure you want to delete this node?");
      if (r) {
        $(this).closest(".node-element").remove();
      }
    }).appendTo($(".node-title", node));

    $("", {
      class: "node-content"
    }).html(content).appendTo(node);

    node.draggable({
      containment: 'parent',
      handle: ".node-title",
      cancel: '.connection,.output,.data',
      stop: function(e, ui) {
        // update position
      }
    });
  }
  $(".add-node-btn").click(function() {
    addNode();
  });
});

body {
  background-color: #000;
  font-family: "arial", san-seriff;
}

.node-container {
  background-color: #2a2a2a;
  border-radius: 10px;
  margin: 3px;
}

.btn-primary {
  border: 0;
  border-radius: 6px;
  padding: 4px;
  background-color: #0000ff;
  color: #FFF;
}

.node-container .node-element {
  background-color: #212121;
  border-radius: 6px;
  border: 0;
  width: 125px;
  height: 75px;
}

.node-container .node-element .node-title {
  background-color: #484848;
  border-radius: 6px 6px 0 0;
  border: 0;
  min-height: 1em;
  color: #fff;
  text-align: center;
}

.node-container .node-element .node-title .btn-delete-node {
  float: right;
  padding-right: 6px;
  cursor: pointer;
}

Since your example code is not a Minimal, Complete, or Verifiable example, it's difficult to determine when or how your elements are added versus initialized.

Hope that helps.

jQuery UI draggable not bound to parent bounds

Answers (1)

Related Questions