JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<header>
<h1 class="noselect">サンプル</h1>
</header>

<p class="noselect">本日見られる人<em>90</em>人</p>

<article>
<section class="sect-card">
	<div class="carddeck">
		<div class="card">
			<div class="card__photo">
				<img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=Now+printing+Monday+New+Line..&w=250&h=250&txttrack=0&bg=ff9900&txtclr=ffffff" alt="" class="card__photo__img" />
			</div>
			<div class="card__profile">
				プロフィールゴニョゴニョ
				<p><a href="http://google.com" class="card__link">リンクリンク</a></p>
				<p><a href="http://google.com" class="card__link">リンクだ</a></p>
			</div>
		</div>
	</div>
</section>


<!-- ボタン -->
<section class="sect-button">
	<div class="button__iikamo"></div>
	<div class="button__imaichi"></div>
	<div class="button__super"></div>
</section>
</article>

SCSS

html {
	background-color: #f0f0f0;
	height: 100%;
}
body {
	width: 320px;
	height: 100%;
	margin: 0 auto;
	background-color: #ffd0f0;
}
.carddeck {
	width: 80%;
	margin: 0 auto 30px;
	min-height: 200px;
	position: relative;
}

.card {
	position: absolute;
	cursor: move;
	top: 0;
	left: 0;
	background-color: #fff;
	border-radius: .25em;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	width: 100%;
	
	&__photo {
		padding: 40px 0;
		width: 50%;
		margin: 0 auto;
		&__img {
			width: 100%;
			border-radius: 50%;
		}
	}
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

JavaScript

// (function ($) {
//     $.fn.tclick = function (onclick) {
//         this.on("touchstart", function (e) { onclick.call(this, e); e.stopPropagation(); e.preventDefault(); });
//         this.on("mousedown", function (e) { onclick.call(this, e); });   //substitute mousedown event for exact same result as touchstart         
//         return this;
//     };
// })(jQuery);

//実験

var $html = $('html'),
		$window = $(window);
var $cardPhoto = $('.card__photo'),
		$cardLink = $('.card__link');

// $window.on('mouseleave.ooo',function(e){
// 	$window.off('mouseleave.ooo touchstart');
// 	console.log('マウスがwindowから外れた');
	
// 	$window.on('mouseleave');
// });



$cardPhoto.on('dragstart',function(e){
	e.preventDefault();
});
$cardLink.on('dragstart',function(e){
	e.preventDefault();
});

var xpos,
		ypos,
		$draggable,
		objX,
		objY,
		hold, //リンク上で何秒ホールドしたか
		moved = false; //リンク上でちょっとでも動かしたらリンク無効

$html.on('click','a.card__link', function(e){
return false;
});

$html.on('mousedown touchstart', function(e){
	// e.stopPropagation();
	console.log(e, e.handled);
	if( !$(e.target).hasClass('card') && ($(e.target).parents('.card').length <= 0)) {
		console.log('cardじゃないよ');
		return;
	}
	e.preventDefault();
	
	console.log('EVENT: ' + e);
	console.log('CARDクリック中');
	
	if( $(e.target).parents('.card').length >= 1 ) {
		$(e.target).parents('.card').addClass('draggable');
	}
	
	if($(e.target).hasClass('card')) {
		$(e.target).addClass('draggable');
	}
	
	if(e.type == 'mousedown'){
		xpos = e.pageX;
		ypos = e.pageY;
	}
	if(e.type == 'touchstart'){
		xpos = e.originalEvent.touches[0].pageX;
		ypos = e.originalEvent.touches[0].pageY;
	}
	$draggable = $('.draggable');
	objY = $draggable.position().top;
	objX = $draggable.position().left;
	
	console.log(xpos,ypos,objX, objY);
	
	// draggable();
	
	//MOVE
	$html.on('mousemove touchmove', function(e){
		console.log(e.pageX, $draggable);
		var currentX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;
			var currentY =...