"card draggable"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/kharrop/pen/ZOwOgL?limit=all&page=22&q=draggable" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700); @import url(https://fonts.googleapis.com/css?family=Lato:400,300,700); body { -webkit-text-size-adjust: 100%; font-family: 'Lato', sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } input { -webkit-appearance: none; } *, *:after, *:before { box-sizing: border-box; margin: 0; padding: 0; } a { text-decoration: none; } .pen-description { margin: 60px 0; text-align: center; } .pen-description .summary { margin-bottom: 10px; } .pen-description .note { color: #555; font-size: .85rem; } html, body { min-height: 100%; } html { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: initial; } /* boostrap overrides */ a, a:hover, a:visited { text-decoration: none; } p { margin: 0; } label { display: initial; } /*******************/ body { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyNmE5NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk5ZDVlOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #226a96), color-stop(100%, #99d5e8)); background-image: -webkit-linear-gradient(left bottom, #226a96 0%, #99d5e8 100%); background-image: linear-gradient(to right top, #226a96 0%, #99d5e8 100%); font-family: 'Lato'; background-color: #eee; color: #555; min-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-perspective: 8000px; perspective: 8000px; } * { box-sizing: border-box; margin: 0; padding: 0; } #app { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } ul { list-style: none; margin: auto; padding: 0; } .card-container { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } li { cursor: -webkit-grab; cursor: grab; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; float: left; } li[draggable=false] { cursor: default; } li[draggable=false] figure.front, li[draggable=false] figure.back { box-shadow: none; } li .card-container { pointer-events: none; } li input[type="text"], li input[type="number"] { border: 0 none; border-bottom: 1px solid #eee; pointer-events: initial; width: 100%; height: 40px; margin-bottom: 20px; outline: 0 none; font-size: 1rem; -webkit-transition: border-bottom 0.2s ease-in-out; transition: border-bottom 0.2s ease-in-out; } li input[type="text"]:focus, li input[type="number"]:focus { border-bottom: 1px solid #3a8bbb; } li.placeholder { background: rgba(255, 255, 255, 0.2); height: 494px; display: -webkit-box; display: -ms-flexbox; display: flex; width: 330px; border-radius: 5px; } .modal { overflow-y: auto; } .modal-dialog { width: 400px; } .modal .fund-container { border: 1px solid #ddd; border-radius: 3px; height: 40px; margin-left: 5px; margin-top: 20px; margin-bottom: 10px; padding: 10px 0; width: 125px; text-align: right; } .modal label { display: inline-block; width: 48%; } .modal .data { width: 50%; text-align: right; margin-left: 5px; display: inline-block; } .modal .smallprint { font-size: .7rem; text-align: right; } .modal .pre-money { opacity: .7; } h1, h2, h3, h4, h5 { margin: 0; } .modal-container { position: relative; } .modal-container .modal, .modal-container .modal-backdrop { position: absolute; } button { pointer-events: initial; } .card-title { text-align: center; margin-bottom: 20px; font-size: 1rem; } .back-arrow { pointer-events: initial; display: table; position: absolute; padding: 20px; margin: -20px; font-size: 1.2rem; } .back-arrow:hover .fa { color: #777777; } .edit-money { display: table; position: absolute; margin-top: 10px; opacity: .7; } .edit-money + input { padding-left: 15px; } .delete { color: #777; pointer-events: initial; text-align: center; font-size: .8rem; margin: 0 auto; margin-top: 10px; padding: 10px; display: table; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .delete:hover { color: #e54b4b; } figure { -webkit-backface-visibility: hidden; backface-visibility: hidden; } figure.front { background: #fff; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); overflow: hidden; pointer-events: intial; border-radius: 5px; padding: 20px; margin: 10px; width: 330px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; box-shadow: 0 10px 20px 0 rgba(13, 59, 86, 0.5); } figure.back { background-color: #fff; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; left: 0; margin: 10px; margin-top: 0; padding: 20px; width: 330px; height: 100%; top: 0; border-radius: 5px; opacity: 0; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } figure .input-container { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .flipped figure.back { opacity: 1; } .flipped { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } .goal__name { color: #777; font-size: .75rem; text-align: center; width: 80%; margin: 10px auto; text-transform: uppercase; letter-spacing: 3px; } .goal--progress { color: #222; font-size: 1.7rem; margin-bottom: 10px; text-align: center; } .goal--remain { color: #222; } .goal--amount { color: #777; font-size: .8rem; text-align: center; } .goal--top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; height: 375px; } .goal--top__container { margin: auto; position: relative; } .edit { pointer-events: initial; padding: 20px; position: absolute; right: 0; margin: -20px; top: 0; margin-top: -13px; } .edit:hover .fa { color: #777777; } .edit .fa { font-size: 1.2rem; } .money:before { content: "$"; } .right { float: right; margin-left: 5px; } .percent { color: #777; } .descriptor { font-size: .8rem; margin-bottom: 20px; } .dropdown-wrapper { margin-top: 10px; pointer-events: initial; border: 1px solid #eee; border-radius: 5px; position: relative; cursor: pointer; width: 100%; -webkit-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .dropdown-wrapper:hover { border: 1px solid #d5d5d5; } .dropdown-wrapper:after { font-family: 'FontAwesome'; content: "\f107"; color: #3FB8AF; position: absolute; right: 10px; top: 7px; } .dropdown-wrapper.outline { border: 1px solid rgba(63, 184, 175, 0.5); box-shadow: 0 0 10px rgba(63, 184, 175, 0.2); } select { cursor: pointer; pointer-events: initial; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0 none; font-size: .8em; padding: 10px; outline: 0; width: 100%; display: block; } .button { background: #3a8bbb; border: 0 none; color: #fff; margin-bottom: auto; cursor: pointer; border-radius: 5px; pointer-events: initial; height: 44px; text-transform: uppercase; text-align: center; font-size: .7rem; letter-spacing: 2px; padding: 15px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; width: 100%; } .button:hover { background: #347da8; } .fa { font-family: 'FontAwesome'; display: block; text-align: center; } .fa.category { left: 0; right: 0; top: -40px; margin: auto; position: absolute; } .fa.fa-plane { color: #3FB8AF; } .fa.fa-car { color: #e54b4b; } .fa.fa-pencil-square-o, .fa.fa-angle-left { color: #aaa; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } /** svg **/ .svg-container { display: inline-block; position: relative; width: 100%; height: 100%; vertical-align: middle; overflow: hidden; } .svg-content { display: inline-block; margin: 0 auto; margin-top: 20px; width: 100%; } .animated { -webkit-animation: dash 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; animation: dash 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .box { width: 100%; height: 100%; margin: 0 auto; position: absolute; left: 0; right: 0; } svg { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } text { text-anchor: middle; } circle { stroke-linecap: round; } .shadow { opacity: .6; } @-webkit-keyframes dash { to { stroke-dashoffset: 0; } } @keyframes dash { to { stroke-dashoffset: 0; } } </style></head><body> <div id="app"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://fb.me/react-with-addons-15.0.0.min.js'></script><script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.5/react-bootstrap.min.js'></script><script src='https://npmcdn.com/react-dnd@2.1.4/dist/ReactDnD.js'></script><script src='https://npmcdn.com/react-dnd-html5-backend@2.1.2/dist/ReactDnDHTML5Backend.min.js'></script> <script >//var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var placeholder = document.createElement("li"); placeholder.className = "placeholder"; var Button = ReactBootstrap.Button; var Modal = ReactBootstrap.Modal; var OverlayTrigger = ReactBootstrap.OverlayTrigger; var Pie = function (_React$Component) { _inherits(Pie, _React$Component); function Pie() { _classCallCheck(this, Pie); return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); } Pie.prototype.render = function render() { var _props = this.props; var color = _props.color; var width = _props.width; var progress = _props.progress; var pi = 3.14159265359; var r = 400 / 2; var c = 2 * pi * r; var realProgress = c * progress; return React.createElement( "div", { className: "svg-container" }, React.createElement( "div", { className: "svg-content" }, React.createElement( "svg", { viewBox: "0 0 500 500", preserveAspectRatio: "xMinYMin meet" }, React.createElement( "filter", { id: "shadow" }, React.createElement("feGaussianBlur", { "in": "SourceGraphic", stdDeviation: "15" }), React.createElement("feOffset", { dx: "-5", dy: "-4" }) ), React.createElement("circle", { className: "animated", cx: "250", cy: "250", r: "200", stroke: "", fillOpacity: "0", strokeWidth: width + 10, strokeDasharray: [realProgress, c], strokeDashoffset: c * progress }), React.createElement("circle", { filter: "url(#shadow)", className: "animated shadow", cx: "250", cy: "250", r: "200", stroke: color, fillOpacity: "0", strokeWidth: width, strokeDasharray: [realProgress, c], strokeDashoffset: c * progress }), React.createElement("circle", { className: "animated fill", cx: "250", cy: "250", r: "200", stroke: color, fillOpacity: "0", strokeWidth: width, strokeDasharray: [realProgress, c], strokeDashoffset: c * progress }), React.createElement("circle", { cx: "250", cy: "250", r: "200", stroke: color, fillOpacity: "0", strokeWidth: "5", strokeDasharray: [c, c], strokeOpacity: "0.1" }) ) ) ); }; return Pie; }(React.Component); var Application = function (_React$Component2) { _inherits(Application, _React$Component2); function Application() { _classCallCheck(this, Application); return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); } Application.prototype.render = function render() { var percent = this.props.percent; var colorChart = this.props.colorChart; return React.createElement( "div", null, React.createElement( "div", { className: "box" }, React.createElement(Pie, { color: colorChart, width: 15, progress: percent }) ) ); }; return Application; }(React.Component); var progressUpdate; var goals = [{ category: 'car', name: 'Car', amount: 20000, progress: 6593, flipped: false, dragStatus: true }, { category: 'plane', name: 'Vacation', amount: 3500, progress: 2984, flipped: false, dragStatus: true }]; var dragStatus = true; var GoalCard = function (_React$Component3) { _inherits(GoalCard, _React$Component3); function GoalCard(props) { _classCallCheck(this, GoalCard); var _this3 = _possibleConstructorReturn(this, _React$Component3.call(this, props)); _this3.state = { condition: false, progress: _this3.props.item.progress, input1: _this3.props.item.name, input2: _this3.props.item.amount, input3: _this3.props.item.progress, selectValue: _this3.props.item.category }; return _this3; } GoalCard.prototype.addMoney = function addMoney() { var addFunds = prompt('Add funds for: ' + this.props.item.name, "0"); this.props.item.progress += Number(addFunds); this.setState({ item: this.props.item }); }; GoalCard.prototype.onSave = function onSave() { this.props.item.progress = progressUpdate; this.setState({ item: this.props.item }); }; GoalCard.prototype.editGoal = function editGoal(index) { this.props.onFlip(index); this.setState({ condition: !this.state.condition, input1: this.props.item.name, input2: this.props.item.amount, input3: this.props.item.progress, selectValue: this.props.item.category }); }; GoalCard.prototype.deleteGoal = function deleteGoal(index) { this.props.onDelete(index); this.setState({ condition: !this.state.condition, input1: this.props.item.name, input2: this.props.item.amount, input3: this.props.item.progress, selectValue: this.props.item.category, flipped: false, dragStatus: true }); }; GoalCard.prototype.cancelEdit = function cancelEdit(index) { this.props.onFlip(index); this.setState({ condition: !this.state.condition, input1: this.props.item.name, input2: this.props.item.amount, input3: this.props.item.progress, selectValue: this.props.item.category }); }; GoalCard.prototype.saveGoal = function saveGoal(index) { this.props.onFlip(index); this.setState({ condition: !this.state.condition }); this.props.item.name = this.state.input1; this.props.item.amount = Number(this.state.input2); this.props.item.progress = Number(this.state.input3); this.props.item.category = this.state.selectValue; }; GoalCard.prototype.handleChange = function handleChange(name, e) { var change = {}; change[name] = e.target.value; this.setState(change); }; GoalCard.prototype.handleDropdown = function handleDropdown(e) { this.setState({ selectValue: e.target.value }); }; GoalCard.prototype.render = function render() { var message; var strokeColor; var status; var remaining; var percentRemaining; if (this.props.item.progress / this.props.item.amount < 1) { strokeColor = "#01579B"; status = "Remaining"; remaining = (this.props.item.amount - this.props.item.progress).toLocaleString(); percentRemaining = "(" + ((this.props.item.amount - this.props.item.progress) / this.props.item.amount * 100).toFixed(0) + "%)"; } else { strokeColor = "#7dbf69"; status = "Exceeded"; remaining = Math.abs(this.props.item.amount - this.props.item.progress).toLocaleString(); percentRemaining = "(" + Math.abs((this.props.item.amount - this.props.item.progress) / this.props.item.amount * 100).toFixed(0) + "%)"; } return React.createElement( "div", { className: this.state.condition ? "flipped card-container" : "card-container" }, React.createElement( "figure", { className: "front" }, React.createElement( "div", { className: "goal--top" }, React.createElement( "a", { href: "#", className: "edit", onClick: this.editGoal.bind(this, this.props.item.index) }, React.createElement("i", { className: "fa fa-pencil-square-o" }) ), React.createElement( "div", { className: "goal__name" }, this.props.item.name ), React.createElement(Application, { percent: this.props.item.progress / this.props.item.amount, colorChart: strokeColor }), React.createElement( "div", { className: "goal--top__container" }, React.createElement("i", { className: 'category fa fa-' + this.props.item.category, "aria-hidden": "true" }), React.createElement( "div", { className: "goal--progress" }, React.createElement( "span", { className: "money" }, this.props.item.progress.toLocaleString() ) ), React.createElement( "div", { className: "goal--amount" }, "of ", React.createElement( "span", { className: "money" }, this.props.item.amount.toLocaleString() ) ) ) ), React.createElement( "div", { className: "goal--bottom" }, React.createElement( "div", { className: "descriptor" }, status, React.createElement( "span", { className: "money right goal--remain" }, remaining ), React.createElement( "span", { className: "percent right" }, percentRemaining ) ), React.createElement(Example, { name: this.props.item.name, progress: this.props.item.progress, amount: this.props.item.amount, onSave: this.onSave.bind(this) }) ) ), React.createElement( "figure", { className: "back" }, React.createElement( "a", { href: "#", className: "back-arrow", onClick: this.cancelEdit.bind(this, this.props.item.index) }, React.createElement("i", { className: "fa fa-angle-left" }) ), React.createElement( "h3", { className: "card-title" }, "Goal Details" ), React.createElement( "div", { className: "input-container" }, React.createElement( "label", { name: "name", className: "descriptor" }, "Name" ), React.createElement("input", { type: "text", placeholder: "Goal Name", value: this.state.input1, onChange: this.handleChange.bind(this, 'input1') }), React.createElement( "label", { name: "amount", className: "descriptor" }, "Goal" ), React.createElement( "span", { className: "edit-money" }, "$" ), React.createElement("input", { type: "number", placeholder: "Amount", value: this.state.input2, onChange: this.handleChange.bind(this, 'input2') }), React.createElement( "label", { name: "progress", className: "descriptor" }, "Progress" ), React.createElement( "span", { className: "edit-money" }, "$" ), " ", React.createElement("input", { type: "number", placeholder: "Progress", value: this.state.input3, onChange: this.handleChange.bind(this, 'input3') }), " ", React.createElement( "label", { name: "icon", className: "descriptor" }, "Icon" ), React.createElement( "div", { className: "dropdown-wrapper" }, React.createElement( "select", { value: this.state.selectValue, onChange: this.handleDropdown.bind(this) }, React.createElement( "option", { value: "car" }, "Car" ), React.createElement( "option", { value: "plane" }, "Plane" ), React.createElement( "option", { value: "" }, "None" ) ) ) ), React.createElement("input", { type: "button", className: "button", value: "Save Changes", onClick: this.saveGoal.bind(this, this.props.item.index) }), React.createElement( "a", { href: "#", className: "delete", onClick: this.deleteGoal.bind(this, this.props.item.index) }, "Delete Goal" ) ) ); }; return GoalCard; }(React.Component); var Example = React.createClass({ displayName: "Example", getInitialState: function getInitialState() { return { showModal: false, progress: this.props.progress, input1: "", sum: "" }; }, close: function close() { this.setState({ showModal: false }); }, submit: function submit(e) { if (e.key === 'Enter') { progressUpdate = this.state.sum; this.props.onSave(); this.setState({ showModal: false }); } }, save: function save() { progressUpdate = this.state.sum; this.props.onSave(); this.setState({ showModal: false }); }, open: function open() { this.setState({ showModal: true, sum: this.props.progress, input1: "" }); }, handleChange: function handleChange(name, e) { var change = {}; change[name] = e.target.value; this.setState(change); this.setState({ sum: Number(this.props.progress) + Number(change[name]) }); }, render: function render() { return React.createElement( "div", null, React.createElement( Button, { bsStyle: "primary", bsSize: "large", onClick: this.open, className: "button" }, "Add funds" ), React.createElement( Modal, { show: this.state.showModal, onHide: this.close }, React.createElement( Modal.Header, { closeButton: true }, React.createElement( Modal.Title, null, "Add Funds for ", this.props.name ) ), React.createElement( Modal.Body, null, React.createElement( "label", null, "Current progress:" ), React.createElement( "div", { className: "data" }, "$", this.props.progress.toLocaleString() ), React.createElement( "label", null, "Add amount:" ), React.createElement( "div", { className: "data" }, React.createElement( "span", { className: "pre-money" }, "$" ), " ", React.createElement("input", { type: "number", className: "fund-container", defaultValue: "", onKeyPress: this.submit.bind(this), onChange: this.handleChange.bind(this, 'input1'), autoFocus: true }) ), React.createElement( "p", { className: "smallprint" }, " Total Progress: ", React.createElement( "span", { className: "pre-money" }, "$" ), this.state.sum.toLocaleString() ) ), React.createElement( Modal.Footer, null, React.createElement( Button, { onClick: this.close }, "Close" ), React.createElement( Button, { type: "button", className: "btn-primary", onClick: this.save.bind(this, this.props) }, "Update Progress" ) ) ) ); } }); var GoalList = React.createClass({ displayName: "GoalList", getInitialState: function getInitialState() { return { data: this.props.data }; }, dragStart: function dragStart(e) { //this.refs['update'].updateGoal(); this.dragged = e.currentTarget; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData("text/html", e.currentTarget); }, dragEnd: function dragEnd(e) { this.dragged.style.display = "block"; placeholder.remove(); // Update data var data = this.state.data; var from = Number(this.dragged.dataset.id); var to = Number(this.over.dataset.id); if (from < to) to--; if (this.nodePlacement == "after") to++; data.splice(to, 0, data.splice(from, 1)[0]); this.setState({ data: data }); }, dragOver: function dragOver(e) { e.preventDefault(); this.dragged.style.display = "none"; if (e.target.className == "placeholder") return; this.over = e.target; // Inside the dragOver method var relY = e.pageY - this.over.offsetTop; var height = this.over.offsetHeight / 2; var relX = e.pageX - this.over.offsetLeft; var width = this.over.offsetWidth / 2; var parent = e.target.parentNode; if (relX >= width) { this.nodePlacement = "after"; parent.insertBefore(placeholder, e.target.nextElementSibling); } else { this.nodePlacement = "before"; parent.insertBefore(placeholder, e.target); } this.setState({ data: this.props.data }); }, onFlip: function onFlip(i) { var data = this.state.data; data[i].flipped = !data[i].flipped; this.setState({ data: data }); if (data[i].flipped) { var data = this.props.data; // data[i].dragStatus = false; dragStatus = false; } else { // data[i].dragStatus= true; dragStatus = true; } }, onDelete: function onDelete(i) { var data = this.props.data; var newData = this.state.data.slice(); //copy array newData.splice(i, 1); //remove element this.setState({ data: newData }); //update state this.props = newData; //var data = this.props.data; data[i].flipped = !data[i].flipped; if (data[i].flipped) { // data[i].dragStatus = false; dragStatus = false; } else { // data[i].dragStatus= true; dragStatus = true; } data = newData; //data.splice(i, 1); // this.setState({ data: data}); }, render: function render() { return React.createElement( "ul", { className: "goal__list", onDragOver: this.dragOver }, this.state.data.map(function (item, i) { return React.createElement( "li", { "data-id": i, key: i // draggable={goals[i].dragStatus} , draggable: dragStatus, onDragEnd: this.dragEnd.bind(this), onDragStart: this.dragStart.bind(this) }, React.createElement(GoalCard, { item: item, onFlip: this.onFlip.bind(this, i), cancelEdit: this.onFlip.bind(this, i), saveGoal: this.onFlip.bind(this, i), onDelete: this.onDelete.bind(this, i) }) ); }, this) ); } }); ReactDOM.render(React.createElement(GoalList, { data: goals }), document.getElementById('app')); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: