wsalesky/move.xhtml

## move.xhtml
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <head>
        <title>Insert with Origin</title>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', (event) => {

                function handleDragStart(e) {
                    this.style.opacity = '0.4';

                    dragSrcEl = this;

                    e.dataTransfer.effectAllowed = 'move';
                    e.dataTransfer.setData('text/html', this.innerHTML);
                  }


                function handleDragEnd(e) {
                  this.style.opacity = '1';

                  items.forEach(function (item) {
                    item.classList.remove('over');
                  });
                }

                function handleDragOver(e) {
                  if (e.preventDefault) {
                    e.preventDefault();
                  }

                  return false;
                }

                function handleDragEnter(e) {
                  this.classList.add('over');
                }

                function handleDragLeave(e) {
                  this.classList.remove('over');
                }

                function handleDrop(e) {
                  e.stopPropagation();

                  if (dragSrcEl !== this) {
                    dragSrcEl.innerHTML = this.innerHTML;
                    this.innerHTML = e.dataTransfer.getData('text/html');
                  }

                  return false;
                }

                let items = document.querySelectorAll('.container .moveInput');
                items.forEach(function(item) {
                  item.addEventListener('dragstart', handleDragStart);
                  item.addEventListener('dragover', handleDragOver);
                  item.addEventListener('dragenter', handleDragEnter);
                  item.addEventListener('dragleave', handleDragLeave);
                  item.addEventListener('dragend', handleDragEnd);
                  item.addEventListener('drop', handleDrop);
                });
              });
        </script>
        <style type="text/css">
          @namespace xf url("http://www.w3.org/2002/xforms");
          body {font-family:Helvetica, sans-serif}
       </style>
        <xf:model>
            <xf:instance id="i-rec">
                <TEI xmlns="http://www.tei-c.org/ns/1.0">
                    <handDesc hands="">
                        <summary/>
                        <handNote xml:id="" scope="" script="" mode="" quality="" medium="">
                            <p/>
                            <persName ref="" role=""/>
                            <p/>
                            <placeName ref=""/>
                        </handNote>
                    </handDesc>
                </TEI>
            </xf:instance>
            <xf:instance id="i-elementTemplate">
                <TEI xmlns="http://www.tei-c.org/ns/1.0">
                    <p/>
                    <persName ref="" role=""/>
                    <placeName ref=""/>
                    <metamark function=""/>
                    <locus from="" to=""/>
                    <origDate when="" notAfter="" notBefore=""/>
                </TEI>
            </xf:instance>
            <xf:instance id="i-position">
                <data>
                    <position></position>
                </data>
            </xf:instance>
        </xf:model>
    </head>
    <body style="margin:2em 10em;">
        <div class="container">
            <h2>Output in document order</h2>
            <p>Outputs inputs in document/instance order. Adding a new p element always results in a p element added as the first child of tei:handNote, not as last, or after the current element. Also, drag and drop does not appear to work here.</p>
            <xf:repeat ref="instance('i-rec')//*:handNote/*" id="handNote">
                <div class="moveInput" draggable="true">
                    <xf:input ref=".">
                        <xf:label>
                            <xf:output value="local-name(.)"/>
                        </xf:label>
                    </xf:input>
                    <xf:trigger class="btn add" appearance="minimal">
                        <xf:label>new p</xf:label>
                        <xf:insert ev:event="DOMActivate"
                            context="parent::*" at="last()" position="after"
                            origin="instance('i-elementTemplate')//*:p"/>
                    </xf:trigger>
                </div>
            </xf:repeat>
            <h2>Test drag and drop without xforms</h2>
            <p>Test normal HTML5 drag and drop function. </p>
            <div class="moveInput" draggable="true">TEST1</div>
            <div class="moveInput" draggable="true">TEST2</div>
            <div class="moveInput" draggable="true">TEST3</div>
            <div class="moveInput" draggable="true">TEST4</div>
            <h3>Test moving elements</h3>
            <p>Test drag and drop on repeat elements, not in document order. Has some very odd behavior, sometimes the drag and drop works, sometimes it does not, sometimes dragged element disappears.</p>
            <xf:group ref="instance('i-rec')//*:handNote">
                <xf:repeat ref="*:p">
                    <div class="moveInput" draggable="true">
                        <xf:input ref=".">
                            <xf:label>Paragraph</xf:label>
                        </xf:input>
                    </div>
                    <!--
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="availElementslistRelationd366e1" data-toggle="dropdown">
                    Available Elements <span class="caret"/></button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="availElementslistRelationd366e1">

                    </ul>
                </div>
                -->
                </xf:repeat>
                <xf:repeat ref="*:persName">
                    <div class="moveInput" draggable="true">
                        <xf:input ref=".">
                            <xf:label>persName</xf:label>
                        </xf:input>
                    </div>
                </xf:repeat>
                <xf:repeat ref="*:placeName">
                    <div class="moveInput" draggable="true">
                        <xf:input ref=".">
                            <xf:label>placeName</xf:label>
                        </xf:input>
                    </div>
                </xf:repeat>
                <xf:repeat ref="*:metamark">
                    <div class="moveInput" draggable="true">
                        <xf:input ref=".">
                            <xf:label>metamark</xf:label>
                        </xf:input>
                    </div>
                </xf:repeat>
            </xf:group>
        </div>
    </body>
</html>
	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
	<head>
	<title>Insert with Origin</title>
	<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', (event) => {

	function handleDragStart(e) {
	this.style.opacity = '0.4';

	dragSrcEl = this;

	e.dataTransfer.effectAllowed = 'move';
	e.dataTransfer.setData('text/html', this.innerHTML);
	}


	function handleDragEnd(e) {
	this.style.opacity = '1';

	items.forEach(function (item) {
	item.classList.remove('over');
	});
	}

	function handleDragOver(e) {
	if (e.preventDefault) {
	e.preventDefault();
	}

	return false;
	}

	function handleDragEnter(e) {
	this.classList.add('over');
	}

	function handleDragLeave(e) {
	this.classList.remove('over');
	}

	function handleDrop(e) {
	e.stopPropagation();

	if (dragSrcEl !== this) {
	dragSrcEl.innerHTML = this.innerHTML;
	this.innerHTML = e.dataTransfer.getData('text/html');
	}

	return false;
	}

	let items = document.querySelectorAll('.container .moveInput');
	items.forEach(function(item) {
	item.addEventListener('dragstart', handleDragStart);
	item.addEventListener('dragover', handleDragOver);
	item.addEventListener('dragenter', handleDragEnter);
	item.addEventListener('dragleave', handleDragLeave);
	item.addEventListener('dragend', handleDragEnd);
	item.addEventListener('drop', handleDrop);
	});
	});
	</script>
	<style type="text/css">
	@namespace xf url("http://www.w3.org/2002/xforms");
	body {font-family:Helvetica, sans-serif}
	</style>
	<xf:model>
	<xf:instance id="i-rec">
	<TEI xmlns="http://www.tei-c.org/ns/1.0">
	<handDesc hands="">
	<summary/>
	<handNote xml:id="" scope="" script="" mode="" quality="" medium="">
	<p/>
	<persName ref="" role=""/>
	<p/>
	<placeName ref=""/>
	</handNote>
	</handDesc>
	</TEI>
	</xf:instance>
	<xf:instance id="i-elementTemplate">
	<TEI xmlns="http://www.tei-c.org/ns/1.0">
	<p/>
	<persName ref="" role=""/>
	<placeName ref=""/>
	<metamark function=""/>
	<locus from="" to=""/>
	<origDate when="" notAfter="" notBefore=""/>
	</TEI>
	</xf:instance>
	<xf:instance id="i-position">
	<data>
	<position></position>
	</data>
	</xf:instance>
	</xf:model>
	</head>
	<body style="margin:2em 10em;">
	<div class="container">
	<h2>Output in document order</h2>
	<p>Outputs inputs in document/instance order. Adding a new p element always results in a p element added as the first child of tei:handNote, not as last, or after the current element. Also, drag and drop does not appear to work here.</p>
	<xf:repeat ref="instance('i-rec')//:handNote/" id="handNote">
	<div class="moveInput" draggable="true">
	<xf:input ref=".">
	<xf:label>
	<xf:output value="local-name(.)"/>
	</xf:label>
	</xf:input>
	<xf:trigger class="btn add" appearance="minimal">
	<xf:label>new p</xf:label>
	<xf:insert ev:event="DOMActivate"
	context="parent::*" at="last()" position="after"
	origin="instance('i-elementTemplate')//*:p"/>
	</xf:trigger>
	</div>
	</xf:repeat>
	<h2>Test drag and drop without xforms</h2>
	<p>Test normal HTML5 drag and drop function. </p>
	<div class="moveInput" draggable="true">TEST1</div>
	<div class="moveInput" draggable="true">TEST2</div>
	<div class="moveInput" draggable="true">TEST3</div>
	<div class="moveInput" draggable="true">TEST4</div>
	<h3>Test moving elements</h3>
	<p>Test drag and drop on repeat elements, not in document order. Has some very odd behavior, sometimes the drag and drop works, sometimes it does not, sometimes dragged element disappears.</p>
	<xf:group ref="instance('i-rec')//*:handNote">
	<xf:repeat ref="*:p">
	<div class="moveInput" draggable="true">
	<xf:input ref=".">
	<xf:label>Paragraph</xf:label>
	</xf:input>
	</div>
	<!--
	<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" id="availElementslistRelationd366e1" data-toggle="dropdown">
	Available Elements <span class="caret"/></button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="availElementslistRelationd366e1">

	</ul>
	</div>
	-->
	</xf:repeat>
	<xf:repeat ref="*:persName">
	<div class="moveInput" draggable="true">
	<xf:input ref=".">
	<xf:label>persName</xf:label>
	</xf:input>
	</div>
	</xf:repeat>
	<xf:repeat ref="*:placeName">
	<div class="moveInput" draggable="true">
	<xf:input ref=".">
	<xf:label>placeName</xf:label>
	</xf:input>
	</div>
	</xf:repeat>
	<xf:repeat ref="*:metamark">
	<div class="moveInput" draggable="true">
	<xf:input ref=".">
	<xf:label>metamark</xf:label>
	</xf:input>
	</div>
	</xf:repeat>
	</xf:group>
	</div>
	</body>
	</html>