julienreszka/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ortable: `put: []` demo</title>


  <!-- AngularJS -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

  <!-- Sortable.js -->
  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>


<style id="jsbin-css">
ul {
  list-style: none;
  padding: 0;
}

li {
  background: #eee;
  margin: 1px;
  padding: 5px 10px;
}

.sortable-ghost {
  opacity: .6;
}

#basket{
border: 1px solid black;
min-height:50px}
</style>
</head>
<body>
  Pick two and put in the 🧺 basket
  <ul id="foo">
    <li>🍕Pizza</li>
    <li>🍫Chocolate</li>
    <li>🧀Cheese</li>
    <li>🥛milk</li>
  </ul>

🧺 Basket:
  <ul id="basket">

  </ul>


<script id="jsbin-javascript">
Sortable.create(foo, {
  group: {
    name: 'foo',
    put: 'basket',
    pull: function (to, from) {
      return from.el.children.length > 2 || 'clone';
    }
  },
  animation: 100
});

Sortable.create(basket, {
  group: {
    name: 'basket',
    put: function (to) {
      return to.el.children.length < 2;
    }
  },
  animation: 100
});
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ortable: `put: []` demo</title>


  <\!-- AngularJS -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script>

  <\!-- Sortable.js -->
  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"><\/script>


</head>
<body>
  Pick two and put in the 🧺 basket
  <ul id="foo">
    <li>🍕Pizza</li>
    <li>🍫Chocolate</li>
    <li>🧀Cheese</li>
    <li>🥛milk</li>
  </ul>

🧺 Basket:
  <ul id="basket">

  </ul>


</body>
</html></script>

<script id="jsbin-source-css" type="text/css">ul {
  list-style: none;
  padding: 0;
}

li {
  background: #eee;
  margin: 1px;
  padding: 5px 10px;
}

.sortable-ghost {
  opacity: .6;
}

#basket{
border: 1px solid black;
min-height:50px}</script>

<script id="jsbin-source-javascript" type="text/javascript">

Sortable.create(foo, {
  group: {
    name: 'foo',
    put: 'basket',
    pull: function (to, from) {
      return from.el.children.length > 2 || 'clone';
    }
  },
  animation: 100
});

Sortable.create(basket, {
  group: {
    name: 'basket',
    put: function (to) {
      return to.el.children.length < 2;
    }
  },
  animation: 100
});</script></body>
</html>

## jsbin.suviyigovi.css
ul {
  list-style: none;
  padding: 0;
}

li {
  background: #eee;
  margin: 1px;
  padding: 5px 10px;
}

.sortable-ghost {
  opacity: .6;
}

#basket{
border: 1px solid black;
min-height:50px}

## jsbin.suviyigovi.js
Sortable.create(foo, {
  group: {
    name: 'foo',
    put: 'basket',
    pull: function (to, from) {
      return from.el.children.length > 2 || 'clone';
    }
  },
  animation: 100
});

Sortable.create(basket, {
  group: {
    name: 'basket',
    put: function (to) {
      return to.el.children.length < 2;
    }
  },
  animation: 100
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ortable: `put: []` demo</title>


	<!-- AngularJS -->
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

	<!-- Sortable.js -->
	<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>


	<style id="jsbin-css">
	ul {
	list-style: none;
	padding: 0;
	}

	li {
	background: #eee;
	margin: 1px;
	padding: 5px 10px;
	}

	.sortable-ghost {
	opacity: .6;
	}

	#basket{
	border: 1px solid black;
	min-height:50px}
	</style>
	</head>
	<body>
	Pick two and put in the 🧺 basket
	<ul id="foo">
	<li>🍕Pizza</li>
	<li>🍫Chocolate</li>
	<li>🧀Cheese</li>
	<li>🥛milk</li>
	</ul>

	🧺 Basket:
	<ul id="basket">

	</ul>


	<script id="jsbin-javascript">
	Sortable.create(foo, {
	group: {
	name: 'foo',
	put: 'basket',
	pull: function (to, from) {
	return from.el.children.length > 2 \|\| 'clone';
	}
	},
	animation: 100
	});

	Sortable.create(basket, {
	group: {
	name: 'basket',
	put: function (to) {
	return to.el.children.length < 2;
	}
	},
	animation: 100
	});
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ortable: `put: []` demo</title>


	<\!-- AngularJS -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script>

	<\!-- Sortable.js -->
	<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"><\/script>


	</head>
	<body>
	Pick two and put in the 🧺 basket
	<ul id="foo">
	<li>🍕Pizza</li>
	<li>🍫Chocolate</li>
	<li>🧀Cheese</li>
	<li>🥛milk</li>
	</ul>

	🧺 Basket:
	<ul id="basket">

	</ul>


	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">ul {
	list-style: none;
	padding: 0;
	}

	li {
	background: #eee;
	margin: 1px;
	padding: 5px 10px;
	}

	.sortable-ghost {
	opacity: .6;
	}

	#basket{
	border: 1px solid black;
	min-height:50px}</script>

	<script id="jsbin-source-javascript" type="text/javascript">

	Sortable.create(foo, {
	group: {
	name: 'foo',
	put: 'basket',
	pull: function (to, from) {
	return from.el.children.length > 2 \|\| 'clone';
	}
	},
	animation: 100
	});

	Sortable.create(basket, {
	group: {
	name: 'basket',
	put: function (to) {
	return to.el.children.length < 2;
	}
	},
	animation: 100
	});</script></body>
	</html>