模糊背景提升卡

Question

我在做什么

我目前正在制作基本的纸牌游戏。我已经完成了一些样式，但我在jQuery中遇到了一些问题。

问题

代码有两个主要问题。

1. 当你举起一张卡并将其拖到另一张卡的顶部时，奇怪的是，div会重叠。
2. 当你拿起并开始拖动卡片时，我希望模糊身体的其他部分。我不知道如何开始这样做。我已经google了一下，没有取得任何进展。

代码

旁白：鼓励任何有关如何改进代码的建议。

<plugin>
    <groupId>com.soebes.maven.plugins</groupId>
    <artifactId>echo-maven-plugin</artifactId>
    <version>0.3.0</version>
    <executions>
      <execution>
        <phase>initialize</phase>
        <goals>
          <goal>echo</goal>
        </goals>
     </execution>
    </executions>
 <configuration>
     <echos>
       <echo>This is the Text which will be printed out.</echo>
     </echos>
 </configuration>
</plugin>

cards = [{
    "name": "Mutant",
    "attack": 500,
    "defense": 100,
    "health": 1000,
    "img": "http://neil.computer/stack/bg2.jpg",
    "effects": {

    },
  },
  {
    "name": "Angry Mom",
    "attack": 500,
    "defense": 100,
    "health": 9001,
    "img": "http://neil.computer/stack/bg3.jpg",
    "effects": {

    },
  }
];

function render($selector, card) {
  $(`
		<div class="name front">` + card["name"] + `</div>
		<div class="attack front"><i class="fa fa-dot-circle-o" aria-hidden="true"></i>` + card["attack"] + `</div>
		<div class="defense front"><i class="fa fa-cog" aria-hidden="true"></i>` + card["defense"] + `</div>
		<div class="health front"><i class="fa fa-heart" aria-hidden="true"></i>` + card["health"] + `</div>`).appendTo($selector);
  $selector.css({
    "background-image": "url(" + card["img"] + ")",
  });
}

render($(".card").draggable(), cards[1]);

@import url(https://fonts.googleapis.com/css?family=Macondo);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

body {
margin:0;
padding:0;
}

.card {
font-family:Macondo, cursive;
position:relative;
width:200px;
height:200px;
border:1px solid #000;
border-radius:4px;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.card .front {
position:absolute;
z-index:1;
color:#FFF;
font-size:20px;
background:rgba(77,77,77,.7);
border:1px solid #000;
-webkit-transition:background .1s;
transition:background .5s;
padding:2px;
}

.card:hover .front {
background:rgba(55,55,55,.9);
-webkit-transition:background .1s;
transition:background .5s;
}

.card .front i {
margin-right:6px;
}

.card .name {
top:0;
left:0;
text-align:center;
font-weight:700;
border-radius:2px 2px 0 0;
width:calc(100%-6px);
}

.card .attack {
border-radius:0 5px 0 2px;
left:0;
bottom:0;
}

.card .defense {
border-radius:5px 0 2px 0;
right:0;
bottom:0;
}

.card .health {
top:50%;
left:50%;
transform:translate(-50%,-50%);
border-radius:5px;
}

Answer 1

你走了。试试这个工作片段。

＆＃13;

＆＃13;

EAGAIN

＆＃13;

sys_error

＆＃13;

cards = [{
				"name": "Mutant",
				"attack": 500,
				"defense": 100,
				"health": 1000,
				"img": "http://neil.computer/stack/bg2.jpg",
				"effects": {

				},
			  },
			  {
				"name": "Angry Mom",
				"attack": 500,
				"defense": 100,
				"health": 9001,
				"img": "http://neil.computer/stack/bg3.jpg",
				"effects": {

				},
			  }
			];

	renderCards( cards );

	$(document).on("drag", ".card", function(){	
		$(this).addClass('active');
		$('.masking').addClass('mask');
	});

	$('.masking').on("click", function(){	
		$(this).removeClass('mask');
		$('.card').removeClass('active');
	});
			
	function renderCards( cards ) {
		$( cards ).each(function( index ) {
			var card 	= cards[index];
			var cardDiv = $('<div class="card" />');
			
			$('<div class="name front">' + card["name"] + '</div><div class="attack front"><i class="fa fa-dot-circle-o" aria-hidden="true"></i>' + card["attack"] + '</div><div class="defense front"><i class="fa fa-cog" aria-hidden="true"></i>' + card["defense"] + '</div><div class="health front"><i class="fa fa-heart" aria-hidden="true"></i>' + card["health"] + '</div>').appendTo(cardDiv);
			
			cardDiv.css({"background-image": "url(" + card["img"] + ")"}).draggable().appendTo('.cards');
		});
	}

＆＃13;

＆＃13;

＆＃13;